vue中使用骨架vue-skeleton-webpack-plugin
.skeleton-header{height:152px;背景:灰色;顶部边距:60px;宽度:152px;边距:60pxauto;}.skeleton-block{display:flex;弹性方向:列;填充顶部:8px;}项目中用到的大部分加载动画,手机端用的比较多的是骷髅、头条、淘宝等。我们PC端的项目有这样的需求,记录一下,有用的话可以参考注:1.调试时可以在浏览器中修改网络为慢3g这样加载时间会长一些,创建一个模板文件。如果不同路由接口显示的模板不同,可以创建一个模板文件。我在src的common文件夹下创建了一个skeleton文件夹,创建了三个文件,这样可以根据自己的需要自定义文件样式Skeleton1.vue
.skeleton-header{height:152px;背景:灰色;顶部边距:60px;宽度:152px;边距:60pxauto;}.skeleton-block{display:flex;弹性方向:列;填充顶部:8px;}Skeleton2.vue .skeleton-header{height:152px;背景:灰色;顶部边距:60px;宽度:152px;边距:60pxauto;}.skeleton-block{display:flex;弹性方向:列;padding-top:8px;}entry-skeleton.jsimportVuefrom'vue'importSkeleton1from'./Skeleton1'importSkeleton2from'./Skeleton2'exportdefaultnewVue({components:{Skeleton1,Skeleton2},template:`
`})三、正在构建文件中创建webpack.skeleton.conf.js文件'usestrict';constpath=require('path')constmerge=require('webpack-merge')constbaseWebpackConfig=require('./webpack.base.conf')constnodeExternals=require('webpack-node-externals')constutils=require('./utils')constconfig=require('../config')constisProduaction=process.env.NODE_ENV==='production'constsourceMapEnabled=isProduction?config.build.productionSourceMap:config.dev.cssSourceMapfunctionresolve(dir){returnpath.join(__dirname,dir)}letskeletonWebpackConfig=merge(baseWebpackConfig,{target:'node',devtool:false,entry:{//只是定义模板文件入口app:resolve('../src/common/skeleton/entry-skeleton.js')},output:Object.assign({},baseWebpackConfig.output,{libraryTarget:'commonjs2'}),externals:nodeExternals({whitelist:/\.css$/}),plugins:[]})//重要:启用extract-text-webpack-pluginskeletonWebpackConfig.module.rules[0].options.loaders=utils.cssLoaders({sourceMap:sourceMapEnabled,extract:true}),module.exports=skeletonWebpackConfig4.然后我们修改webpack.dev.conf.js在开发环境测试,如果需要上线,webpack.prod.conf.js也需要做同样的配置...//1.导入插件constSkeletonWebpackPlugin=require('vue-skeleton-webpack-plugin')...//2.配置插件plugins:[...newSkeletonWebpackPlugin({//导入我定义的配置文件webpackConfig:require('./webpack.skeleton.conf'),quiet:true,minimize:true,router:{mode:'hash',routes:[//不同的路由不同界面配置模板{path:'/login',skeletonId:'skeleton1'},{path:'/home',skeletonId:'skeleton2'}]}})...**记得配置完项目重启,你可以看到相应路由跳转前的空白页面,展示了我们的骨架界面。**