vue首屏骨架屏实现步骤

vue首屏骨架屏实现步骤

• 参考资料gittub地址
• 不论是传统模式还是 SSR，只要是后端渲染，就不需要骨架屏。因为页面的内容直接存在于 HTML，所以并没有骨架屏出场的余地。
• 骨架屏的路由模式只能是‘history’
• 骨架屏原理 在页面未显示之前给一个类似背景图添加链接描述片的骨架，也叫首屏绘制

1. npm install vue-skeleton-webpack-plugin -D
2. 在src目录下创建Skeleton文件夹，添加Skeleton.js文件，内容如下

3. 在src目录下添加entry-skeleton.js文件，内容如下：

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

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

4. 在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')
 
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: []
})

5. 在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
    })

6. 之后运行项目，可在调试工具网络中设置不缓存和fast 3G，观看效果（这个时候skeleton.vue的style是不会起作用的）

上面效果实现之后，骨架屏可以优化（生产模式再改变，开发模式见不到效果）

1. 在main.js中修改new Vue，保证 Vue 实例在异步样式表加载完毕后进行挂载，如果此时样式还没有完成，我们把挂载方法放到全局，等到样式加载完成后再调用（根据css的ref=‘preload’属性：只加载不执行）

let app = new Vue({
  router,
  store,
  components: { App },
  template: ''
})
window.mountApp = () => {
  app.$mount('#app')
}
if (window.STYLE_READY) {
  window.mountApp()
}

2. 参照skeleton-demo，在index.html文件的head添加针对 JS 和 CSS 的 （在下载后Vue实例挂载前应用样式），为skeleton使用异步的css

<% for (var jsFilePath of htmlWebpackPlugin.files.js) { %>
        
    <% } %>
    <% for (var cssFilePath of htmlWebpackPlugin.files.css) { %>
        
        
    <% } %>
    

3. 由于不需要插件插入 ，我们可以编写一个简单的 Webpack 插件，监听 HTMLWebpackPlugin 的事件，过滤掉 CSS。这样插件就不会自动插入 了，于是在build文件夹下添加ommit-css-webpack-plugin.js，内容如下

module.exports = class OmmitCSSPlugin {
    constructor() {}
    apply(compiler) {
        compiler.plugin('compilation', (compilation) => {
            compilation.plugin(
                'html-webpack-plugin-alter-asset-tags',
                (args, cb) => {
                    args.head = args.head.filter((link) => link.attributes.rel !== 'stylesheet');
                    cb(null, args);
                }
            );
        });
    }
}

4. 在webpack.prod.conf.js中添加const OmmitCSSPlugin = require('./ommit-css-webpack-plugin')，在此文件的webpack.plugins中添加new OmmitCSSPlugin()即可，之后npm run build即可在生成的文件中看到优化加载速度后并且样式能生效的骨架屏

另外，附上我最近的一个Vue项目地址vue仿饿了么项目，有兴趣的可以star一下