給Vue集成Skeleton骨架屏，並加持PWA

背景

這幾天剛了解了PWA，但是實際項目受限於基礎環境(https)無法快速落地，找來Vue這個Demo項目，再整理一下，為後面實際落地做準備。

玩法

基於Vue-cli創建的項目，加入Skeleton和PWA屬性，升級Demo項目

步驟

1. 通過Vue-cli搭建Vue項目
2. 加持PWA
3. 加入Skeleton

步驟一：搭建Vue項目

通過Vue官網資源，通過Vue-cli搭建Vue項目說明應該還是很詳細的，這裡不在贅述。

vuejs/vue-cli?

github.com

注意需要手動安裝「prettier」

npm install [email protected]

步驟二：加持PWA

Vue對自己的定義同樣包含「漸進式」JavaScript框架，所以應該和PWA還是蠻般配的。

通過Google提供的PWA開發繼承工具Workbox，可以快速給我們的應用加持PWA：

1. 安裝依賴

# 項目添加workbox-webpack-plugin組件npm install --save-dev workbox-webpack-plugin# 項目添加sw-register-webpack-plugin組件npm install --save-dev sw-register-webpack-plugin

2. 在webpack中引用插件，並設置配置信息

// webpack.dev.conf.js、webpack.prod.conf.js webpack配置文件添加插件配置const WorkBoxPlugin = require(workbox-webpack-plugin)const SwRegisterWebpackPlugin = require(sw-register-webpack-plugin)// 以service-worker.js文件為模板，注入生成service-worker.jsnew WorkBoxPlugin.InjectManifest({ swSrc: path.resolve(__dirname, ../src/service-worker.js)}),// 通過插件注入生成sw註冊腳本new SwRegisterWebpackPlugin({ version: +new Date()}),

3. workbox(service-worker)配置，主要是局部緩存策略

// 啟動後停止舊的swworkbox.skipWaiting()workbox.clientsClaim()// 設置緩存名稱前綴workbox.core.setCacheNameDetails({ prefix: vuecli})// 緩存manifest.jsonworkbox.routing.registerRoute( //manifest.json/, workbox.strategies.staleWhileRevalidate())// sw-register網路請求優先workbox.routing.registerRoute( //sw-register.js/, workbox.strategies.networkOnly())workbox.precaching.precacheAndRoute(self.__precacheManifest || [])

上面幾步就完成了！信不信？就是這麼easy！

步驟三：加入Skeleton

Skeleton，骨架屏，在頁面數據尚未載入前先給用戶展示出頁面的大致結構，直到請求數據返回後再渲染頁面，補充進需要顯示的數據內容，一般用於首頁、數據列表等。

我們可以通過vue-skeleton-webpack-plugin快速實現骨架屏的搭建

1. 安裝vue-skeleton-webpack-plugin

npm install --save-dev vue-skeleton-webpack-plugin

2. 添加Skeleton.vue骨架頁面

<template> <div class="skeleton-wrapper"> <header class="skeleton-header"></header> <section class="skeleton-block"> <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-header { height: 152px; background: grey; margin-top: 60px; width: 152px; margin: 60px auto; } .skeleton-block { display: flex; flex-direction: column; padding-top: 8px; }</style>

3. 添加骨架屏入口entry-skeleton.js

import Vue from vueimport Skeleton from ./components/Skeletonexport default new Vue({ components: { Skeleton }, template: <skeleton />})

4. webpack中加入skeleton打包插件

new SkeletonWebpackPlugin({ webpackConfig: require(./webpack.skeleton.conf)})

參考文檔：