Vue 单页面骨架屏实现

1、 创建如下文件

entry-skeleton.js代码如下

import Vue from 'vue'
import skeleton1 from './skeleton1'
import skeleton2 from './skeleton2'
export default new Vue({
  components: {
    skeleton1,skeleton2
  },
  template: `
  

  
  
  
`
})

skeleton1.vue代码如下（对面路由 /sift）

skeleton2.vue代码如下（对面路由 /play）

2、在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')
const config = require('../config')
const utils = require('./utils')
const isProduction = process.env.NODE_ENV === 'production'
const sourceMapEnabled = isProduction
  ? config.build.productionSourceMap
  : config.dev.cssSourceMap
 
function resolve(dir) {
  return path.join(__dirname, dir)
}
 
let skeletonWebpackConfig = merge(baseWebpackConfig, {
  target: 'node',
  devtool: false,
  entry: {
    app: resolve('../src/components/Skeleton/entry-skeleton.js')
  },
  output: Object.assign({}, baseWebpackConfig.output, {
    libraryTarget: 'commonjs2'
  }),
  externals: nodeExternals({
    whitelist: /\.css$/
  }),
  plugins: []
})
 
// important: enable extract-text-webpack-plugin 
// 重点配置
skeletonWebpackConfig.module.rules[0].options.loaders = utils.cssLoaders({
  sourceMap: sourceMapEnabled,
  extract: true
})
 
module.exports = skeletonWebpackConfig

3、 在webpack.dev.conf跟webpack.prod.conf两个文件中加入以下代码

 plugins: [
    new SkeletonWebpackPlugin({
      webpackConfig: require('./webpack.skeleton.conf'),
      quiet: true,
      minimize: true,
      router: {
        mode: 'hash',
        routes: [
          {
            path: '/sift',    //对应使用路由
            skeletonId: 'skeleton1'    // entry-skeleton.js定义的骨架id
          },
          {
            path: '/play/:type',    //如路由为动态参数，必须跟router的配置一样
            skeletonId: 'skeleton2'    // entry-skeleton.js定义的骨架id
          },
        ]
      }
    }),
 
  ]

4、 其他说明

SkeletonWebpackPlugin的参数说明
webpackConfig 必填，渲染 skeleton 的 webpack 配置对象
insertAfter 选填，渲染 DOM 结果插入位置，默认值为字符串 '

'
也可以传入 Function，方法签名为 insertAfter(entryKey: string): string，返回值为挂载点字符串
quiet 选填，在服务端渲染时是否需要输出信息到控制台
router 选填 SPA 下配置各个路由路径对应的 Skeleton
mode 选填 路由模式，两个有效值 history|hash
routes 选填 路由数组，其中每个路由对象包含两个属性：
path 路由路径
skeletonId Skeleton DOM 的 id
minimize 选填 SPA 下是否需要压缩注入 HTML 的 JS 代码

注意
只在页面第一次onload完成前会有骨架页显示,路由之间跳转不会有显示。
在router中先定义好/sift和/play两个路由
在谷歌调试工具中，在network中把网速调到slow3g 即可看到效果

---

版权声明：本文为CSDN博主「永远的小白」的原创文章，遵循CC 4.0 by-sa版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/gg45151...