vue-cli3配置骨架屏方案
前言
最近在学vue
,准备使用vue写一个移动端项目。考虑到首页白屏优化,需要实现骨架屏需求。这里介绍两种方案,当然都是根据现有的轮子搭的
步骤
- 安装
vue-skeleton-webpack-plugin
插件
npm install --save-dev vue-skeleton-webpack-plugin
- vue.config.js配置
const path = require('path')
const SkeletonWebpackPlugin = require('vue-skeleton-webpack-plugin');
module.exports = {
css: {
extract: true, // css拆分ExtractTextPlugin插件,默认true - 骨架屏需要为true
},
configureWebpack: (config)=>{
// vue骨架屏插件配置
config.plugins.push(new SkeletonWebpackPlugin({
webpackConfig: {
entry: {
app: path.join(__dirname, './src/utils/skeleton.js'),
},
},
minimize: true,
quiet: true,
}))
},
}
- 新建一个
skeleton.js
文件放在src->utils
文件夹下面、
import Vue from 'vue';
import Skeleton from '../components/Skeleton/skeleton-2';
export default new Vue({
components: {
Skeleton,
},
render: h => h(Skeleton),
});
这个文件是用来注入骨架屏的
- 新建一个
skeleton-2.vue
骨架屏组件
<template>
<div class="skeleton page">
<div class="skeleton-nav"></div>
<div class="skeleton-swiper"></div>
<ul class="skeleton-tabs">
<li v-for="i in 8" class="skeleton-tabs-item"><span></span><<