在vue-cli3.0中添加骨架屏

前言

为了前端体验更加友好，减缓用户的焦虑情绪，提升项目质量等，我们在项目里面可以使用骨架屏，提前渲染出来一个跟正式页面相似的页面出来，减小首屏加载时间。

在vue中使用骨架屏

因为我们的代码会使用webpack打包，所以在我们的js下载运行之前，用户是无法在页面上看到信息，所以，我们要把骨架屏相关的代码放到HTML里面，当然，可以把代码直接写在html文件的

里面，但是为了维护我们进行开发时的体验，我们在开发时可以使用一个webpack插件，来像开发组件一样来开发骨架屏。

1. 添加vue-skeleton-webpack-plugin插件

npm install vue-skeleton-webpack-plugin

2. 新建我们的骨架组件
   首先在我们的项目中新建一个.vue文件，用来写我们的骨架屏，我这里是在app.vue同级目录下新建了一个Skeleton.vue,里面可以写我们的骨架屏代码；

在这个页面里面我们可以根据需要来编写代码，最好使用样式或者base64的图片，以减少初始的请求。

3. 把我们的骨架屏文件引入到vue里面
   在main.js同级新建一个Skeleton.js文件引入的Skeleton.vue，并把它引入到vue；

// - Skeleton.js
import Vue from 'vue';
import Skeleton from './Skeleton.vue';

export default new Vue({
  components: {
    Skeleton,
  },
  render: h => h(Skeleton),
});

4. 配置打包方案
   在项目根目录新建vue.config.js,在里面配置vue-skeleton-webpack-plugin插件，并开启css分离；

const path = require('path');
const SkeletonWebpackPlugin = require('vue-skeleton-webpack-plugin');

module.exports = {
  configureWebpack: (config)=>{
    config.plugins.push(new SkeletonWebpackPlugin({
      webpackConfig: {
        entry: {
          app: path.join(__dirname, './src/skeleton.js'),
        },
      },
      minimize: true,
      quiet: true,
    })) 
  },
  // css相关配置
  css: {
    // 是否使用css分离插件 ExtractTextPlugin
    extract: true,
    // 开启 CSS source maps?
    sourceMap: false,
    // 启用 CSS modules for all css / pre-processor files.
    modules: false
  },
};

5. 在浏览器中查看效果
   因为网络快的时候，我们是不显示骨架屏的，所以要把我们的浏览器网络调慢一点（调整为solw 3G），以方便我们开发和调试；

   
   
   

   网络.png

效果.png

我们会看到骨架屏先被渲染出来，然后才会有我们的页面渲染出来；

6. 根据路由来渲染不同的骨架
   vue-skeleton-webpack-plugin框架是支持根据不同路由来渲染不同的骨架屏的，附上地址：
   vue-skeleton-webpack-plugin插件地址

小结

首先感谢各位大牛为社区所做的贡献，这才使我们在遇到问题时有了更好的解决方案，其次附上我的demo链接，方便大家体验，并且在该demo中还有关于vue-i18n国际化的使用。
demo链接
感谢您的阅读，欢迎评论和关注哦！