vue 移動端注入骨架屏

什麼是骨架屏？

簡單的說，骨架屏就是在頁面未渲染完成的時候，先用一些簡單的圖形大體勾勒出頁面的基本輪廓，給用戶形成頁面正在加載的錯覺，待頁面渲染完成以後再用頁面替換掉骨架屏，從而減小頁面白屏的時間，給用戶帶來更好的體驗。本文就是根據page-skeleton-webpack-plugin 實現的骨架屏的實現，基於的是vue-cli3進行採坑。

項目開始

安裝依賴，package.json

配置vue.config.js

須要在新建vue.config.js，把以前的下載好的page-skeleton-webpack-plugin引入進行配置，詳細的配置以下自定義配置能夠查看官方的配置

配置postcss自定義的適配方案，具體的配置 請點擊查看，以下：

配置完成

按照上面的依賴配置完成的話就能夠查看啦。你們可能發現有個node.js，其實就是一個啓動本地serve的一個js，配置好的骨架屏須要查看打包後的dist文件，方能查看效果，
固然能夠從官網這邊能夠能夠看到，具體涉及到裏面不少的細節須要你們一塊兒採坑。加油~~~~

項目地址

項目地址，若是以爲幫助你 麻煩給個star

其餘

ps:若是安裝依賴出問題的話必定要先查看page-skeleton-webpack-plugin的issue