（亲测）vue-cli项目添加骨架屏多种方式，自动生成骨架屏

vue-cli项目首页加载缓慢想要使用骨架屏效果，经过几天的踩坑，这里学习并记录一下vue项目自动生成骨架屏方法。

添加骨架屏，其优势在于：

骨架屏的作用主要是在网络请求较慢时，提供基础占位，当数据加载完成，恢复数据展示。这样给用户一种很自然的过渡，不会造成页面长时间白屏或者闪烁等情况。常见的骨架屏实现方案有ssr服务端渲染和prerender两种解决方案。

那么重点就是怎么添加骨架屏了，

大概方案有：

上述方案分析：

1、手动编写骨架屏代码

该方法就是手动编写项目index.html 入口文件，实现在vue项目初始化展示替换div#app根元素前的骨架屏效果。

2、通过预渲染手动书写的代码生成相应的骨架屏 vue-skeleton-webpack-plugin

该方法需要下载使用vue-skeleton-webpack-plugin，主要原理是利用vue-server-renderer 将 .vue格式的骨架屏文件处理成html和css字符串的功能，进而完成骨架屏的注入；但是需要手动编写预渲染的骨架屏效果图代码；

亲测，注意以下出错场景：

【webpack --config ./webpack.skeleton.conf.js】报错可以尝试将webpack版本从4.0降到3.0；
vue-loader@15.*之后必须配置带有VueLoaderPlugin 之外，还需另外单独配置css-loader。（如果你不想手动设置 webpack，我们推荐使用 Vue CLI 直接创建一个项目的脚手架。通过 Vue CLI 创建的项目会针对多数常见的开发需求进行预先配置，做到开箱即用。）
错误未安装webpck-cli，使用命令全局安装【npm install -g webpack-cli】即可；
项目报错可能是需要安装 css-loader style-loader
如果提示在webpack.config中未配置mode环境选项，配置即可
为保持构建环境一致，请采用`npm run dev`脚本编译的形式，以确保使用的webpack命令，vue-loader是本地版本。

详细使用参考网址：https://segmentfault.com/a/1190000014832185

使用步骤归纳：

1、安装vue-skeleton-webpack-plugin插件

2、在/src目录下新建一个Skeleton.vue文件，即已编写好的预渲染页面；

3、文件同级目录再新建一个skeleton.entry.js入口文件，其中引用了Skeleton.vue文件；

4、在项目根目录新建一个webpack.skeleton.conf.js配置文件，以专门用来进行骨架屏的构建。该文件中包含skeleton.entry.js入口文件，引用VueSSRServerPlugin插件，指定了其输出的json文件名；

5、使用【webpack --config ./webpack.skeleton.conf.js】命令在/dist目录下生成一个skeleton.json文件；

6、再在根目录下新建一个skeleton.js，该文件用于读取skeleton.json往index.html内插入骨架屏内容。

7、入口index.html文件，需要在被写入内容的位置添加占位符，本例子在div#app里写入；

8、运行node skeleton.js，就可以完成骨架屏的注入了