前言

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

在vue中使用骨架屏

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

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.jsimport 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)，以方便我们开发和调试；

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

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

小结

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

demo链接：https://gitee.com/webh5/skeletonAndI18n

感谢您的阅读，欢迎评论和关注哦！

作者：Yinzhishan

链接：https://www.jianshu.com/p/cb5717c5948f