vue.js中增加骨架页面

在 vuejs-template/webpack 或 vuejs-template/pwa 中增加骨架页面 vue-skeleton-webpack-plugin

安装骨架页面插件库

yarn add vue-skeleton-webpack-plugin -D

build/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')

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

build/vue-loader.conf.js

找到 extract: isProduction 修改为 extract: true

build/webpack.dev.conf.js

在 plugins 中对象中增加插件, 需要引入模块 const ExtractTextPlugin = require('extract-text-webpack-plugin')

// extract css into its own file
new ExtractTextPlugin({
  filename: utils.assetsPath('css/[name].[contenthash].css')
})

build/webpack.dev.conf.js webpack.prod.conf.js

在 plugins 中对象中增加插件, 需要引入模块 const SkeletonWebpackPlugin = require('vue-skeleton-webpack-plugin')
需要引入模块 const SkeletonWebpackPlugin = require('vue-skeleton-webpack-plugin')

// inject skeleton content(DOM & CSS) into HTML
new SkeletonWebpackPlugin({
  webpackConfig: require('./webpack.skeleton.conf'),
  quiet: true
})