chrome vue 未响应_vue之骨架屏踩坑之路
vue的首屏优化方式有很多种 骨架屏就是其中之一
作为一个前端开发 用户体验感是很重要的 关于页面的loading状态的展示,目前主流的主要有loading图和进度条两种 现今使用骨架屏的也越来越多
首先 何为“骨架屏”在进入首次页面加载数据之前都会有一段空白时间 这段空白时间没有出现任何东西 会造成用户体验的不好 “骨架屏”就是在页面内容未加载完成的时候,先使用一些图形进行占位,待内容加载完成之后再把它替换掉
常见的骨架屏
废话不多说 首先搭建一个vue-cli的项目 vue init webpack demo
当用npm run dev 运行起来之后 可直接在入口html文件的div#app里面随便写点什么,然后打开chrome的开发者工具,在Network里面找到throttle功能,调节网速为“Slow 3G”,刷新页面,就会看到你先前写的内容会首先显示出来,待js加载完了才会替换为原本要展示的内容 例:
先显示的内容为直接写在html页面的内容 js加载完后就替换掉了
所以对于在Vue页面实现骨架屏的思路就是直接在div#app内直接插入骨架屏相关内容即可
但是直接手动在div#app里面写入骨架屏内容是不科学的,我们需要一个扩展性强且自动化的易维护方案。既然是在Vue项目里,我们当然希望所谓的骨架屏也是一个.vue文件,它能够在构建时由工具自动注入到div#app里面
主要模块如下:
├── src
│ ├── components
│ ├── App.vue
│ ├── main.js
│ ├── skeleton.entry.js
│ └── Skeleton.vue
├── index.html
├── package.json
└── webpack.conf.js
首先,我们在/src目录下新建一个Skeleton.vue文件,其内容如下:(这个只是demo骨架屏的模板,可换成你们自己所需的模板)
接下来,再新建一个skeleton.entry.js入口文件:
在完成了骨架屏的准备之后,就轮到一个关键插件vue-server-renderer登场了,我们主要利用它能够把.vue文件处理成html和css字符串的功能,来完成骨架屏的注入
注意:安装vue-server-renderer一定要与vue的版本一致否则会报错,安装命令:
npm install vue vue-server-renderer --save
安装完成之后可在package.json里面看到版本号是否一致
还需要在根目录新建一个webpack.skeleton.conf.js文件,以专门用来进行骨架屏的构建:
区别在于其target: 'node'
配置了externals,在plugins里面加入了VueSSRServerPlugin
可以看到,该配置文件和普通的配置文件基本完全一致,在VueSSRServerPlugin中,指定了其输出的json文件名。我们可以通过运行下列指令,在/dist目录下生成一个skeleton.json文件:webpack --config ./webpack.skeleton.conf.js
1.在命令行里输入node -v命令查看nodejs是否安装成功
2.然后配置npm路径,先在nodejs文件夹中新建两个文件夹名为: node_global和node_cache
启动CMD输入命令:
配置全局路径:npm config set prefix “d:odejsode_global” 回车
配置缓存路径:npm config set cache “d:odejsode_cache”回车
(输入指令后,命令行闪一下,不会有任何提示)
3.通过npm全局安装webpack,输入命令 npm install webpack -g,安装完后会显示安装路径;
4.修改环境变量:我的电脑——右键属性——高级系统设置——高级———环境变量
分别新建用户变量PATH和系统变量NODE_PATH
用户变量
系统变量
这是最重要的一点;在安装webpack后出现'webpack' 不是内部或外部命令的问题 就是此处设置不对
PATH和NODE_PATH全部设置为:C:Program Filesodejsode_global(nodejs的路径)
上面的步骤做完之后 关掉并重启cmd命令行工具(切记一定要关掉重启 否则还是会报错的)-->
做完上面的内容之后就可以运行webpack --config ./webpack.skeleton.conf.js 命令了
接下来,在根目录下新建一个skeleton.js,该文件即将被用于往index.html内插入骨架屏:
注意,作为模板的html文件,需要在被写入内容的位置添加占位符,本例子在div#app里写入:
接下来,只要在cmd中输入命令node skeleton.js,就可以完成骨架屏的注入了:
在运行node skeleton.js的时候,有报未安装 webpack-node-externals ,需要安装 npm install webpack-node-externals --save-dev
也有说运行node skeleton.js的时候有时候会报别的错,需要安装npm install vue-template-compiler (但是我在运行是并没有安装这个 也没有报别的错 姑且放在这里 不是必须安装的)
在运行node skeleton.js的时候,也会报另外一个错误:
ERROR in ./src/Skeleton.vue
TypeError: Cannot read property 'vue' of undefined
问题原因是因为webpack的版本号问题 全局安装的webpack版本问题基本上都是4.0以上的 需要把webpack版本换成3.0以上的就好了 执行:npm install webpack@3.12.0 -g(这个的vue-cli里面package.json里面的webpack版本号) 这个装完基本上就ok了
然后再运行node skeleton.js 就会看到生成一个dist文件夹里面有个skeleton.json文件
最后npm run dev 运行项目 就可以看到骨架屏成功显示出来了
***查了很多资料 才完成 其中有参考 https://segmentfault.com/a/1190000014832185
GitHub仓库地址:https://github.com/ZPPGitHub/vue-gujiaping/tree/master/gujiaping
chrome vue 未响应_vue之骨架屏踩坑之路相关推荐
- vue 判断页面加载完成_vue之骨架屏踩坑之路
vue的首屏优化方式有很多种 骨架屏就是其中之一 作为一个前端开发 用户体验感是很重要的 关于页面的loading状态的展示,目前主流的主要有loading图和进度条两种 现今使用骨架屏的也越来越多 ...
- chrome vue 未响应_VUE数据响应式
响应式顾名思义就是对外界的触发变化做出响应. 在vue中,vue的data是响应式的,我们会很好奇,为什么传入new Vue({})中的data在做出变化的时候,UI中相应地显示的数据也会响应做出变化 ...
- chrome vue 未响应_vue兼容低版本chrome
做项目遇到了一些不能轻易升级chrome版本的客户,他们还用着40版本的chrome,所以今天就来说说为了兼容低版本的chrome做了哪些努力. 主要是两件事情: (1)将自己代码转为es5版本 (2 ...
- build vue 指定版本_vue buid及部署踩坑记录
build 在vue项目build有两个需求:动态指定环境变量配置(dev.test.production环境打包时对应特定的环境变量配置) 减少项目build后的体积和加快项目build速度 动态指 ...
- vue 浏览器调试 样式如何定位样式_Vue项目骨架屏注入实践和方法总结
相比于早些年前后端代码紧密耦合.后端工程师还得写前端代码的时代,如今已发展到前后端分离,这种开发方式大大提升了前后端项目的可维护性与开发效率,让前后端工程师关注于自己的主业.然而在带来便利的同时,也带 ...
- wpf page 界面渲染完成后执行自动操作_Vue项目骨架屏自动生成方案(dps)
什么是骨架屏 什么是骨架屏呢?骨架屏(Skeleton Screen)是指在页面数据加载完成前,先给用户展示出页面的大致结构(灰色占位图),在拿到接口数据后渲染出实际页面内容然后替换掉.Skeleto ...
- weex-eros+vue Android拍照并预览图片踩坑【小白向】
[TOC] 最近做一个移动端的手机拍照预览,碰了不少墙,但还是遇到好心人帮助,成功预览.感谢"小豬仔"~ 开干之前,请先阅读 Weex-Eros文档 和 Vue教程 Windows ...
- 索尼乐播投屏服务器未响应,乐播投屏电视没有声音怎么办?三招帮你解决令人困扰的问题!...
软件大小: 37.43 MB 软件版本: 4.2.16.0 软件类型: 媒体其它 在我们平时的生活当中,周末宅在家里休息时,使用手机来追剧.看电影或者是看综艺,已经成为很多小伙伴周末宅在家里消磨时间的 ...
- Vue项目中监听全屏事件,实现全屏功能和按esc退出全屏(解决全屏踩坑难题)
展示效果: 全屏功能 代码: <el-buttontype="button"id="full-btn-medium"@click="VideoF ...
最新文章
- 【转】深入了解CPU两大架构ARM与X86
- Vue学习--前后端交互
- Ant tutorial(2)
- js实现表格配对小游戏
- [2018.07.26 T2] 背包问题
- pythonbreak语句教程_Python break 语句
- matlab单机无限大系统_MATLAB运用simulink建立简单的单机-无穷大系统仿真
- 《视觉SLAM十四讲》笔记
- VS2012/VS2013安装教程
- 光猫DNS服务器未响应,有光纤猫了还要猫吗?
- Web 2.0 创业神器为何天生敏捷?
- php group 用法,thinkphp5 链式操作group分组用法
- 后羿 05 ‖ 九婴
- Echarts柱状图在实体里面展示数据/柱状图顶部展示数据简记
- MAC下HFS,HFS+,HFSX文件系统 解析
- 量化投资之工具篇一:Backtrader从入门到精通(8)-交易系统代码详解
- 后台管理有什么作用?
- Linux驱动_设备树下LED驱动
- .net 5 C# 网页gbk编码问题的一种解决方案
- 怎样才算得上是一名优秀的软件测试工程师呢?