vue骨架屏

1.安装依赖

npm install vue-server-renderer
npm install vue-skeleton-webpack-plugin
npm install webpack-merge
npm install webpack-node-externals

2.引入依赖SkeletonWebpackPlugin

// webpack.dev.conf.js和webpack.prod.conf.js中加入如下代码
const SkeletonWebpackPlugin = require('vue-skeleton-webpack-plugin')

plugins: [
    new SkeletonWebpackPlugin({
      webpackConfig: require('./webpack.skeleton.conf'),
      quiet: true
    })
]

// 同级新建webpack.skeleton.conf.js文件
'use strict';

const path = require('path')
const merge = require('webpack-merge')
const baseWebpackConfig = require('./webpack.base.conf')
const nodeExternals = require('webpack-node-externals')

function resolve(dir) {
  return path.join(__dirname, dir)
}

module.exports = merge(baseWebpackConfig, {
  target: 'node',
  devtool: false,
  entry: {
    app: resolve('../src/entry-skeleton.js')
  },
  output: Object.assign({}, baseWebpackConfig.output, {
    libraryTarget: 'commonjs2'
  }),
  externals: nodeExternals({
    whitelist: /\.css$/
  }),
  plugins: []
})

3.在指定的入口文件添加骨架屏组件（这里是上文的../src/entry-skeleton.js）

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

export default new Vue({
    components: {
        Skeleton
    },
    template: ''
});

4.完成运行npm run dev

ps:
1.版本不匹配的问题：

Error:
vue packages version mismatch:
[email protected]
[email protected]

重新安装npm install [email protected]