vue指定多页骨架屏
2019-06-07 本文已影响17人
匆匆那年_海
1.在 webpack.dev.conf.js和webpack.prod.conf.js中plugins的配置修改为
new SkeletonWebpackPlugin({
webpackConfig: {
entry: {
app: resolve('./src/entry-skeleton.js')
},
},
router: {
//和项目路由中的模式保持一致哦
mode: 'history',
routes: [{
path: '/',
skeletonId: 'skeleton1'
},
{
path: '/index2',
skeletonId: 'skeleton1'
},
]
}
})
2.骨架屏组件的入口文件src/entry-skeleton.js文件修改为
import Vue from 'vue'
// 创建的骨架屏 Vue 实例
import skeleton1 from './skeleton';
import skeleton2 from './skeleton';
export default new Vue({
components: {
skeleton1,
skeleton2
},
template: ` <div>
<skeleton1 id="skeleton1" style="display:none"/>
<skeleton2 id="skeleton2" style="display:none"/>
</div>`
});