（亲测）vue-cli项目添加骨架屏多种方式，自动生成骨架屏
vue-cli項目首頁加載緩慢想要使用骨架屏效果，經過幾天的踩坑，這里學習并記錄一下vue項目自動生成骨架屏方法。
?
添加骨架屏，其優勢在于：
- 寫于HTML文件中，獨立于Vue框架，節省了JS加載時間+JS全局環境創建的執行時間的時間
- 只在主頁面根據頁面結構獨立編寫，預先展示頁面結構，進行視覺暫留，提供更好的交互感官
- 只在頁面結構變化時進行修改，維護成本相對較低
骨架屏的作用主要是在網絡請求較慢時，提供基礎占位，當數據加載完成，恢復數據展示。這樣給用戶一種很自然的過渡，不會造成頁面長時間白屏或者閃爍等情況。 常見的骨架屏實現方案有ssr服務端渲染和prerender兩種解決方案。
?
?
那么重點就是怎么添加骨架屏 了，
?
大概方案有：
比如：vue-skeleton-webpack-plugin
page-skeleton-webpack-plugin
?
上述方案分析：
1、手動編寫骨架屏代碼
該方法就是手動編寫項目index.html 入口文件，實現在vue項目初始化展示替換div#app根元素前的骨架屏效果。
?
2、通過預渲染手動書寫的代碼生成相應的骨架屏 vue-skeleton-webpack-plugin
該方法需要下載使用vue-skeleton-webpack-plugin，主要原理是利用vue-server-renderer?將 .vue格式的骨架屏文件處理成html和css字符串的功能，進而完成骨架屏的注入；但是需要手動編寫預渲染的骨架屏效果圖代碼；
?
親測，注意以下出錯場景：
- 【webpack --config ./webpack.skeleton.conf.js】報錯可以嘗試將webpack版本從4.0降到3.0；
- vue-loader@15.*之后 必須配置帶有VueLoaderPlugin 之外，還需另外單獨配置css-loader。（如果你不想手動設置 webpack，我們推薦使用?Vue CLI?直接創建一個項目的腳手架。通過 Vue CLI 創建的項目會針對多數常見的開發需求進行預先配置，做到開箱即用。）
- 錯誤未安裝webpck-cli，使用命令全局安裝【npm install -g webpack-cli】即可；
- 項目報錯可能是需要安裝?css-loader style-loader
- 如果提示在webpack.config中未配置mode環境選項，配置即可
- 為保持構建環境一致，請采用`npm run dev`腳本編譯的形式，以確保使用的webpack命令，vue-loader是本地版本。
?
詳細使用參考網址：https://segmentfault.com/a/1190000014832185?
?
使用步驟歸納：
1、安裝vue-skeleton-webpack-plugin插件
2、在/src目錄下新建一個Skeleton.vue文件，即已編寫好的預渲染頁面；
3、文件同級目錄再新建一個skeleton.entry.js入口文件，其中引用了Skeleton.vue文件；
4、在項目根目錄新建一個webpack.skeleton.conf.js配置文件，以專門用來進行骨架屏的構建。該文件中包含skeleton.entry.js入口文件，引用VueSSRServerPlugin插件，指定了其輸出的json文件名；
5、使用【webpack --config ./webpack.skeleton.conf.js】命令在/dist目錄下生成一個skeleton.json文件；
6、再在根目錄下新建一個skeleton.js，該文件用于讀取skeleton.json往index.html內插入骨架屏內容。
7、入口index.html文件，需要在被寫入內容的位置添加<!--vue-ssr-outlet-->占位符，本例子在div#app里寫入；
8、運行node skeleton.js，就可以完成骨架屏的注入了
?
前兩個方法的局限性是都需要開發者自己編寫骨架屏代碼，并沒有自動根據vue頁面內容轉換成相應色塊組成的dom片段再注入入口html文件！！！所以使用該種方法開發效率低，麻煩，不能完全解決根據vue項目頁面自動生成骨架屏dom，并注入入口html替代#app節點的問題
?
?
?
?
3、餓了么內部的生成骨架頁面的工具? page-skeleton-webpack-plugin
?
餓了么的做的比較強大了，還有 UI 界面專門調整骨架屏
- 對于復雜的頁面也會有不盡如人意的地方
- 生成的骨架屏節點是基于頁面本身的結構和 CSS，存在嵌套比較深的情況，體積不會太小
- 只支持 history 模式.
這個不多說，沒有親測；餓了嗎骨架屏方案思路??https://github.com/Jocs/jocs.github.io/issues/22
?
?
?
?
4、JavaScript操作DOM 的方式結合 Puppeteer 自動生成網頁骨架屏
該方法需要下載【npm i draw-page-structure -g】? ，用純 DOM 的方式結合 Puppeteer 自動生成網頁骨架屏，原理是：
- ? ? ? 生成操作Dom的JavaScript腳本（該腳本用于將項目頁面轉換成色塊形式的骨架屏效果）；
- ? ? ?通過Puppeteer控制谷歌瀏覽器運行項目頁面并獲取頁面、將上一步的腳本注入該頁面，并生成骨架屏所需的Dom節點；
- ? ? ?將自動生成的骨架屏Dom片段插入到應用頁面的根入口節點。
?
使用注意事項：
- 核心在于 DOM 操作，puppeteer 僅提供運行環境和導出方式
- 只要能訪問的頁面都能生成，history 與 hash 模式無限制
- 不受項目和框架的限制，vue 和 react 等項目零修改即可復用
- 生成色塊的單位為百分比，不同設備自適應
- 不需要 css-tree 來提取樣式，不依賴頁面本身的布局結構，生成扁平的 DOM 節點體積特別小
- 支持自定義生成方式與導出方式
?
詳細使用參考網址?https://www.imooc.com/article/253387、https://github.com/famanoder/dps
?
dps插件使用步驟：
1、使用命令【npm i draw-page-structure -g】安裝插件
2、dps init?生成配置文件?dps.config.js
3、修改?dps.config.js?進行相關配置，包括想渲染的頁面url、通過includeElement和init方法調整骨架屏效果等；
4、dps start?開始生成骨架屏
?
?
參考文章有：
Vue頁面骨架屏注入實踐 ：
餓了嗎一種自動化生成骨架屏的方案
用純 DOM 的方式結合 Puppeteer 自動生成網頁骨架屏、
dps(draw-page-structure)插件使用
?
?
?
?
?
總結
以上是生活随笔為你收集整理的（亲测）vue-cli项目添加骨架屏多种方式，自动生成骨架屏的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： wxWidgets随笔(3)-hello
- 下一篇： AI理论知识整理（7）-单高斯模型