Vue cli3.0 配置骨架屏

Vue cli3.0 配置骨架屏

配置 config
脚手架 3.0 的好处就是所有配置都集中到 vue.config.js 处理，非常方便，核心的 config 代码贴一下，完整代码最后会附上。

//引入插件
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分离，直接作为内联style处理到html里，提高载入速度
  css: {
    extract: true,
    sourceMap: false,
    modules: false,
  },
}

创建骨架屏文件
需要 2 个核心文件，1 个是骨架屏模板 Skeleton.vue，一个是动态引入到项目的 Skeleton.js
Skeleton.vue：模板在这里就不贴代码了，常规的 template 和 style 根据首屏的布局，写一个简化版的纯色模板即可，可在最后下载 demo 参考。
Skeleton.js：参考 main.js，但是需要通过 export default 单独暴露给 Vue。

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

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

以上文件保存到 src 目录下，和 App.vue 同级。