Vue项目首屏加入骨架屏demo(cli3-4版本)

不废话，直接说怎么做

先手写一个骨架屏css,命名为Skeleton.vue

      <ul>
       <li></li>
       <li></li>
       <li></li>
       <li></li>
       </ul>

 li {
    width: 100px;
    height: 100px;
    background: #f2f2f2;
    animation-duration: 1.5s;
    animation-name: blink;
    animation-iteration-count: infinite;
    margin-top:100px;
}

@keyframes blink {
    0% {
        opacity: .4;
    }
    50% {
        opacity: 1;
    }
    100% {
        opacity: .4;
    }
}

让li标签成为正在加载中的状态

接下来我们用到了一个插件

cnpm	i  vue-skeleton-webpack-plugin --save

然后创建一个js文件，里面放上模版，命名为skeleton.js

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

export default new Vue({
    components: {
        Skeleton:Skeleton
    },
    template:`<Skeleton skeletonId="listSkeleton"></Skeleton>`
})

然后创建一个vue.config.js文件

const path = require('path')
const SkeletonWebpackPlugin = require('vue-skeleton-webpack-plugin')

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

module.exports = {
 configureWebpack: {
        plugins: [
            // 骨架屏配置
            new SkeletonWebpackPlugin({
                webpackConfig: {
                    entry: {
                        app: resolve('./src/skeleton.js')
                    },
                },
                minimize: true,
                quiet: true,
                router: {
                    mode: 'history',
                    routes: [
                        { path: '/', skeletonId: 'listSkeleton' },
                        { path: '/home', skeletonId: 'listSkeleton' }
                    ]
                }
          }),
}

路由文件里面，我们定义redirect，

const  Home = () => import( "" );

 {
    path: '',
    redirect: '/home'
  },
  {
  path : '/home',
  component:Home,
  }

给一个默认路径/home,假如我们的首页地址为localhost:8080/home

那么只需要输入localhost:8080即可，就能看到我们的骨架屏了，当/home页面加载完成，骨架屏也就消失了

Vue项目首屏加入骨架屏demo(cli3-4版本)

猜你喜欢