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