前言
為了前端體驗(yàn)更加友好擒抛，減緩用戶(hù)的焦慮情緒狮斗，提升項(xiàng)目質(zhì)量等绽乔，我們?cè)陧?xiàng)目里面可以使用骨架屏，提前渲染出來(lái)一個(gè)跟正式頁(yè)面相似的頁(yè)面出來(lái)碳褒，減小首屏加載時(shí)間折砸。
在vue中使用骨架屏
因?yàn)槲覀兊拇a會(huì)使用webpack打包，所以在我們的js下載運(yùn)行之前沙峻，用戶(hù)是無(wú)法在頁(yè)面上看到信息睦授，所以，我們要把骨架屏相關(guān)的代碼放到HTML里面专酗，當(dāng)然睹逃，可以把代碼直接寫(xiě)在html文件的<div id=’app‘></div>里面，但是為了維護(hù)我們進(jìn)行開(kāi)發(fā)時(shí)的體驗(yàn)祷肯，我們?cè)陂_(kāi)發(fā)時(shí)可以使用一個(gè)webpack插件沉填，來(lái)像開(kāi)發(fā)組件一樣來(lái)開(kāi)發(fā)骨架屏。
- 添加
vue-skeleton-webpack-plugin插件
npm install vue-skeleton-webpack-plugin
- 新建我們的骨架組件
首先在我們的項(xiàng)目中新建一個(gè).vue文件佑笋，用來(lái)寫(xiě)我們的骨架屏翼闹，我這里是在app.vue同級(jí)目錄下新建了一個(gè)Skeleton.vue,里面可以寫(xiě)我們的骨架屏代碼；
<template>
<div class="skeleton-wrapper">
<section class="skeleton-block">
<!-- eslint-disable vue/max-len -->
<img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSIwIDAgMTA4MCAyNjEiPjxkZWZzPjxwYXRoIGlkPSJiIiBkPSJNMCAwaDEwODB2MjYwSDB6Ii8+PGZpbHRlciBpZD0iYSIgd2lkdGg9IjIwMCUiIGhlaWdodD0iMjAwJSIgeD0iLTUwJSIgeT0iLTUwJSIgZmlsdGVyVW5pdHM9Im9iamVjdEJvdW5kaW5nQm94Ij48ZmVPZmZzZXQgZHk9Ii0xIiBpbj0iU291cmNlQWxwaGEiIHJlc3VsdD0ic2hhZG93T2Zmc2V0T3V0ZXIxIi8+PGZlQ29sb3JNYXRyaXggaW49InNoYWRvd09mZnNldE91dGVyMSIgdmFsdWVzPSIwIDAgMCAwIDAuOTMzMzMzMzMzIDAgMCAwIDAgMC45MzMzMzMzMzMgMCAwIDAgMCAwLjkzMzMzMzMzMyAwIDAgMCAxIDAiLz48L2ZpbHRlcj48L2RlZnM+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgwIDEpIj48dXNlIGZpbGw9IiMwMDAiIGZpbHRlcj0idXJsKCNhKSIgeGxpbms6aHJlZj0iI2IiLz48dXNlIGZpbGw9IiNGRkYiIHhsaW5rOmhyZWY9IiNiIi8+PHBhdGggZmlsbD0iI0Y2RjZGNiIgZD0iTTIzMCA0NGg1MzN2NDZIMjMweiIvPjxyZWN0IHdpZHRoPSIxNzIiIGhlaWdodD0iMTcyIiB4PSIzMCIgeT0iNDQiIGZpbGw9IiNGNkY2RjYiIHJ4PSI0Ii8+PHBhdGggZmlsbD0iI0Y2RjZGNiIgZD0iTTIzMCAxMThoMzY5djMwSDIzMHpNMjMwIDE4MmgzMjN2MzBIMjMwek04MTIgMTE1aDIzOHYzOUg4MTJ6TTgwOCAxODRoMjQydjMwSDgwOHpNOTE3IDQ4aDEzM3YzN0g5MTd6Ii8+PC9nPjwvc3ZnPg==">
<img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSIwIDAgMTA4MCAyNjEiPjxkZWZzPjxwYXRoIGlkPSJiIiBkPSJNMCAwaDEwODB2MjYwSDB6Ii8+PGZpbHRlciBpZD0iYSIgd2lkdGg9IjIwMCUiIGhlaWdodD0iMjAwJSIgeD0iLTUwJSIgeT0iLTUwJSIgZmlsdGVyVW5pdHM9Im9iamVjdEJvdW5kaW5nQm94Ij48ZmVPZmZzZXQgZHk9Ii0xIiBpbj0iU291cmNlQWxwaGEiIHJlc3VsdD0ic2hhZG93T2Zmc2V0T3V0ZXIxIi8+PGZlQ29sb3JNYXRyaXggaW49InNoYWRvd09mZnNldE91dGVyMSIgdmFsdWVzPSIwIDAgMCAwIDAuOTMzMzMzMzMzIDAgMCAwIDAgMC45MzMzMzMzMzMgMCAwIDAgMCAwLjkzMzMzMzMzMyAwIDAgMCAxIDAiLz48L2ZpbHRlcj48L2RlZnM+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgwIDEpIj48dXNlIGZpbGw9IiMwMDAiIGZpbHRlcj0idXJsKCNhKSIgeGxpbms6aHJlZj0iI2IiLz48dXNlIGZpbGw9IiNGRkYiIHhsaW5rOmhyZWY9IiNiIi8+PHBhdGggZmlsbD0iI0Y2RjZGNiIgZD0iTTIzMCA0NGg1MzN2NDZIMjMweiIvPjxyZWN0IHdpZHRoPSIxNzIiIGhlaWdodD0iMTcyIiB4PSIzMCIgeT0iNDQiIGZpbGw9IiNGNkY2RjYiIHJ4PSI0Ii8+PHBhdGggZmlsbD0iI0Y2RjZGNiIgZD0iTTIzMCAxMThoMzY5djMwSDIzMHpNMjMwIDE4MmgzMjN2MzBIMjMwek04MTIgMTE1aDIzOHYzOUg4MTJ6TTgwOCAxODRoMjQydjMwSDgwOHpNOTE3IDQ4aDEzM3YzN0g5MTd6Ii8+PC9nPjwvc3ZnPg==">
</section>
</div>
</template>
<script>
export default {
name: 'Skeleton',
};
</script>
<style scoped>
.skeleton-block {
display: flex;
flex-direction: column;
padding: 16px;
background:#f7f7f7;
}
</style>
在這個(gè)頁(yè)面里面我們可以根據(jù)需要來(lái)編寫(xiě)代碼蒋纬，最好使用樣式或者base64的圖片猎荠，以減少初始的請(qǐng)求坚弱。
- 把我們的骨架屏文件引入到
vue里面
在main.js同級(jí)新建一個(gè)Skeleton.js文件引入的Skeleton.vue，并把它引入到vue关摇；
// - Skeleton.js
import Vue from 'vue';
import Skeleton from './Skeleton.vue';
export default new Vue({
components: {
Skeleton,
},
render: h => h(Skeleton),
});
- 配置打包方案
在項(xiàng)目根目錄新建vue.config.js,在里面配置vue-skeleton-webpack-plugin插件荒叶，并開(kāi)啟css分離；
const path = require('path');
const SkeletonWebpackPlugin = require('vue-skeleton-webpack-plugin');
module.exports = {
configureWebpack: (config)=>{
config.plugins.push(new SkeletonWebpackPlugin({
webpackConfig: {
entry: {
app: path.join(__dirname, './src/skeleton.js'),
},
},
minimize: true,
quiet: true,
}))
},
// css相關(guān)配置
css: {
// 是否使用css分離插件 ExtractTextPlugin
extract: true,
// 開(kāi)啟 CSS source maps?
sourceMap: false,
// 啟用 CSS modules for all css / pre-processor files.
modules: false
},
};
-
在瀏覽器中查看效果
因?yàn)榫W(wǎng)絡(luò)快的時(shí)候输虱，我們是不顯示骨架屏的些楣，所以要把我們的瀏覽器網(wǎng)絡(luò)調(diào)慢一點(diǎn)（調(diào)整為solw 3G），以方便我們開(kāi)發(fā)和調(diào)試宪睹；
網(wǎng)絡(luò).png
效果.png
我們會(huì)看到骨架屏先被渲染出來(lái)愁茁，然后才會(huì)有我們的頁(yè)面渲染出來(lái)；
- 根據(jù)路由來(lái)渲染不同的骨架
vue-skeleton-webpack-plugin框架是支持根據(jù)不同路由來(lái)渲染不同的骨架屏的亭病，附上地址：
vue-skeleton-webpack-plugin插件地址
小結(jié)
首先感謝各位大牛為社區(qū)所做的貢獻(xiàn)鹅很，這才使我們?cè)谟龅絾?wèn)題時(shí)有了更好的解決方案，其次附上我的demo鏈接罪帖，方便大家體驗(yàn)促煮，并且在該demo中還有關(guān)于vue-i18n國(guó)際化的使用。
demo鏈接
感謝您的閱讀胸蛛，歡迎評(píng)論和關(guān)注哦污茵！
