什么是骨架屏？

烏魯木齊網(wǎng)站制作公司哪家好，找成都創(chuàng)新互聯(lián)！從網(wǎng)頁設(shè)計、網(wǎng)站建設(shè)、微信開發(fā)、APP開發(fā)、響應(yīng)式網(wǎng)站設(shè)計等網(wǎng)站項(xiàng)目制作，到程序開發(fā)，運(yùn)營維護(hù)。成都創(chuàng)新互聯(lián)2013年開創(chuàng)至今到現(xiàn)在10年的時間，我們擁有了豐富的建站經(jīng)驗(yàn)和運(yùn)維經(jīng)驗(yàn)，來保證我們的工作的順利進(jìn)行。專注于網(wǎng)站建設(shè)就選成都創(chuàng)新互聯(lián)。

簡單的說，骨架屏就是在頁面未渲染完成的時候，先用一些簡單的圖形大致勾勒出頁面的基本輪廓，給用戶造成頁面正在加載的錯覺，待頁面渲染完成之后再用頁面替換掉骨架屏，從而減少頁面白屏的時間，給用戶帶來更好的體驗(yàn)。本文就是根據(jù) page-skeleton-webpack-plugin 實(shí)現(xiàn)的骨架屏的實(shí)現(xiàn)，基于的是vue-cli3進(jìn)行采坑 。

項(xiàng)目開始

安裝依賴，package.json

配置vue.config.js

需要在新建vue.config.js，把之前的下載好的page-skeleton-webpack-plugin引入進(jìn)行配置，詳細(xì)的配置如下自定義配置可以查看官方的配置

配置postcss自定義的適配方案，具體的配置 請點(diǎn)擊查看 ，如下：

配置完成

按照上面的依賴配置完成的話就可以查看啦。大家可能發(fā)現(xiàn)有個node.js，其實(shí)就是一個啟動本地serve的一個js，配置好的骨架屏需要查看打包后的dist文件，方能查看效果，

當(dāng)然可以從官網(wǎng)這邊可以可以看到，具體涉及到里面很多的細(xì)節(jié)需要大家一起采坑。加油~~~~

項(xiàng)目地址

項(xiàng)目地址 ， 如果覺得幫助你 麻煩給個star

其他

ps:如果安裝依賴出問題的話一定要先查看page-skeleton-webpack-plugin的 issue

總結(jié)

以上所述是小編給大家介紹的vue 移動端注入骨架屏的配置方法，希望對大家有所幫助，如果大家有任何疑問歡迎給我留言，小編會及時回復(fù)大家的！