vue單頁面利用prerender-spa-plugin實現骨架屏-簡化版
阿新 • • 發佈:2018-12-29
build/webpack.base.conf.js 中引入 var PrerenderSpaPlugin = require('prerender-spa-plugin'); module.exports = { ...... plugins: [ new PrerenderSpaPlugin( // Absolute path to compiled SPA path.join(__dirname, '../dist'), // List of routes to prerender ['/'] ) ] }
view/account/index.vue
<template> <div id="app"> <!-- 骨架屏 --> <mainSkeleton v-if="!init"></mainSkeleton> <!-- 骨架屏 --> <!-- 頁面 --> <div v-else> <div class="body">content</div> </div> <!-- 頁面 --> </div> </template> <script> import mainSkeleton from './main.skeleton.vue' export default { name: 'app', data () { return { init: false } }, mounted () { setTimeout(() => { //延時模擬資料請求 this.init = true },1000) }, components: { mainSkeleton } } </script>
view/account/main.skeleton.vue
<template> <div class="main-skeleton"> <div class="w_head"></div> <div class="w_content"></div> </div> </template> <script> export default { data(){ return{ } } } </script> <style> .w_head{ width:100%; height:50px; margin-bottom: 10px; background:pink; } .w_content{ width:100%; height: 100px; background: #ddd; } </style>
1秒以後顯示頁面