vue项目中使用骨架屏

1、在component文件夹下创建Skeleton文件夹。

安装
npm i vue-skeleton-webpack-plugin -S/-D

2、在Skeleton文件夹下创建这三个文件

1.entry-skeleton.js

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

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

2.Skeleton.vue

3.webpack.skeleton.conf.js

在build下新建

'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/components/Skeleton/entry-skeleton.js') // url
    },
    output: Object.assign({
     }, baseWebpackConfig.output, {
     
        libraryTarget: 'commonjs2'
    }),
    externals: nodeExternals({
     
        whitelist: /\.css$/
    }),
    plugins: []
})

3、修改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中配置，动态效果只在在打包后才看得到的！！！