在Vue中有關(guān)如何實現(xiàn)單頁面骨架屏

來源：懂視網(wǎng) 責(zé)編：小采時間：2020-11-27 19:36:07

在Vue中有關(guān)如何實現(xiàn)單頁面骨架屏

在Vue中有關(guān)如何實現(xiàn)單頁面骨架屏:這篇文章主要給大家介紹了關(guān)于Vue單頁面骨架屏實踐的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家學(xué)習(xí)或者使用vue具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起看看吧。關(guān)于骨架屏介紹骨架屏的作用主要是在網(wǎng)絡(luò)請求較慢時，提供基礎(chǔ)占位，當(dāng)數(shù)據(jù)加載

推薦度：

點擊下載本文 文檔為doc格式

導(dǎo)讀在Vue中有關(guān)如何實現(xiàn)單頁面骨架屏:這篇文章主要給大家介紹了關(guān)于Vue單頁面骨架屏實踐的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家學(xué)習(xí)或者使用vue具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起看看吧。關(guān)于骨架屏介紹骨架屏的作用主要是在網(wǎng)絡(luò)請求較慢時，提供基礎(chǔ)占位，當(dāng)數(shù)據(jù)加載

這篇文章主要給大家介紹了關(guān)于Vue單頁面骨架屏實踐的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家學(xué)習(xí)或者使用vue具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起看看吧。

關(guān)于骨架屏介紹

骨架屏的作用主要是在網(wǎng)絡(luò)請求較慢時，提供基礎(chǔ)占位，當(dāng)數(shù)據(jù)加載完成，恢復(fù)數(shù)據(jù)展示。這樣給用戶一種很自然的過渡，不會造成頁面長時間白屏或者閃爍等情況。常見的骨架屏實現(xiàn)方案有ssr服務(wù)端渲染和prerender兩種解決方案。

這里主要通過代碼為大家展示如何一步步做出這樣一個骨架屏：

prerender 渲染骨架屏

本組件庫骨架屏的實現(xiàn)也是基于預(yù)渲染去實現(xiàn)的，有關(guān)于預(yù)渲染更詳細(xì)的介紹請參考這篇文章：處理 Vue 單頁面 Meta SEO的另一種思路下面我們主要介紹其實現(xiàn)步驟，首先我們也是需要配置webpack-plugin，不過已經(jīng)有實現(xiàn)好的prerender-spa-plugin可用

var path = require('path')
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
 ['/']
 )
 ]
}

然后寫好我們的骨架屏文件main.skeleton.vue

 <template>
 <p class="main-skeleton">
 <w-skeleton height="80px"></w-skeleton>
 <p>
 <p class="skeleton-container">
 <p class="skeleton">
 <w-skeleton height="300px"></w-skeleton>
 </p>
 <w-skeleton height="45px"></w-skeleton>
 </p>
 <p class="skeleton-bottom">
 <w-skeleton height="45px"></w-skeleton>
 </p>
 </p>
 </p>
</template>

當(dāng)初次進(jìn)入頁面的時候我們需要顯示骨架屏，數(shù)據(jù)加載完，我們需要移除骨架屏：

 <template>
 <p id="app">
 <mainSkeleton v-if="!init"></mainSkeleton>
 <p v-else>
 <p class="body"></p>
 </p>
 </p>
</template>
<script>
 import mainSkeleton from './main.skeleton.vue'
 export default {
 name: 'app',
 data () {
 return {
 init: false
 }
 },
 mounted () {
 // 這里模擬數(shù)據(jù)請求
 setTimeout(() => {
 this.init = true
 }, 250)
 },
 components: {
 mainSkeleton
 }
 }
</script>

ssr 渲染骨架屏

下面我用我靈魂畫師的筆法，畫出了大致的過程：

首先創(chuàng)建我們的skeleton.entry.js

import Vue from 'vue';
import Skeleton from './skeleton.vue';
export default new Vue({
 components: {
 Skeleton
 },
 template: '<skeleton />'
});

當(dāng)然這里的skeleton.vue使我們事先寫好的骨架屏組件，看起來可能是這樣：

 <template>
 <p class="skeleton-wrapper">
 <header class="skeleton-header"></header>
 <p class="skeleton-block"></p>
 </p>
</template>

然后我們需要的是能把skeleton.entry.js編譯成服務(wù)端渲染可用的bundle文件，所以我們需要有個編譯骨架屏的webpack.ssr.conf.js文件:

const path = require('path');
const merge = require('webpack-merge');
const baseWebpackConfig = require('./webpack.base.conf');
const nodeExternals = require('webpack-node-externals');
function resolve(dir) {
 return path.join(__dirname, dir);
}
module.exports = merge(baseWebpackConfig, {
 target: 'node',
 devtool: false,
 entry: {
 app: resolve('./src/skeleton.entry.js')
 },
 output: Object.assign({}, baseWebpackConfig.output, {
 libraryTarget: 'commonjs2'
 }),
 externals: nodeExternals({
 whitelist: /\.css$/
 }),
 plugins: []
});

接下來最終的步驟，就是編寫我們的webpackPlugin，我們期望我們的webpackPlugin可以幫我們把入口文件編譯成bundle，然后再通過vue-server-renderer來render bundle，最終產(chǎn)出響應(yīng)的html片段和css片段，這里貼出核心代碼：

 // webpack start to work
 var serverCompiler = webpack(serverWebpackConfig);
 var mfs = new MFS();
 // output to mfs
 serverCompiler.outputFileSystem = mfs;
 serverCompiler.watch({}, function (err, stats) {

 if (err) {
 reject(err);
 return;
 }
 stats = stats.toJson();
 stats.errors.forEach(function (err) {
 console.error(err);
 });
 stats.warnings.forEach(function (err) {
 console.warn(err);
 });
 var bundle = mfs.readFileSync(outputPath, 'utf-8');
 var skeletonCss = mfs.readFileSync(outputCssPath, 'utf-8');
 // create renderer with bundle
 var renderer = createBundleRenderer(bundle);
 // use vue ssr to render skeleton
 renderer.renderToString({}, function (err, skeletonHtml) {
 if (err) {
 reject(err);
 }
 else {
 resolve({skeletonHtml: skeletonHtml, skeletonCss: skeletonCss});
 }
 });
 });

最后一步，我們對產(chǎn)出的html片段, css片段進(jìn)行組裝，產(chǎn)出最終的html，所以我們需要監(jiān)聽webpack 的編譯掛載之前的事件：

compiler.plugin('compilation', function (compilation) {
 // add listener for html-webpack-plugin
 compilation.plugin('html-webpack-plugin-before-html-processing', function (htmlPluginData, callback) {
 ssr(webpackConfig).then(function (ref) {
 var skeletonHtml = ref.skeletonHtml;
 var skeletonCss = ref.skeletonCss;
 // insert inlined styles into html
 var headTagEndPos = htmlPluginData.html.lastIndexOf('</head>');
 htmlPluginData.html = insertAt(htmlPluginData.html, ("<style>" + skeletonCss + "</style>"), headTagEndPos);

 // replace mounted point with ssr result in html
 var appPos = htmlPluginData.html.lastIndexOf(insertAfter) + insertAfter.length;
 htmlPluginData.html = insertAt(htmlPluginData.html, skeletonHtml, appPos);
 callback(null, htmlPluginData);
 });
 });
 });

github 地址： VV-UI/VV-UI

演示地址: vv-ui

文檔地址：skeleton

上面是我整理給大家的，希望今后會對大家有幫助。

相關(guān)文章：

詳細(xì)解答Webpack+Babel+React環(huán)境搭建（詳細(xì)教程）

詳細(xì)介紹webpack中scss的相關(guān)配置

在Vue中項目組件化開發(fā)（詳細(xì)教程）

如何實現(xiàn)webpack多入口文件打包配置

在JavaScript中如何實現(xiàn)多重繼承

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權(quán)等問題請及時與本網(wǎng)聯(lián)系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com