vue 移動(dòng)端注入骨架屏的配置方法
什么是骨架屏？
簡(jiǎn)單的說(shuō)，骨架屏就是在頁(yè)面未渲染完成的時(shí)候，先用一些簡(jiǎn)單的圖形大致勾勒出頁(yè)面的基本輪廓，給用戶造成頁(yè)面正在加載的錯(cuò)覺，待頁(yè)面渲染完成之后再用頁(yè)面替換掉骨架屏，從而減少頁(yè)面白屏的時(shí)間，給用戶帶來(lái)更好的體驗(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自定義的適配方案，具體的配置 請(qǐng)點(diǎn)擊查看 ，如下：
配置完成
按照上面的依賴配置完成的話就可以查看啦。大家可能發(fā)現(xiàn)有個(gè)node.js，其實(shí)就是一個(gè)啟動(dòng)本地serve的一個(gè)js，配置好的骨架屏需要查看打包后的dist文件，方能查看效果，
當(dāng)然可以從官網(wǎng)這邊可以可以看到，具體涉及到里面很多的細(xì)節(jié)需要大家一起采坑。加油~~~~
項(xiàng)目地址
項(xiàng)目地址 ， 如果覺得幫助你 麻煩給個(gè)star
其他
ps:如果安裝依賴出問(wèn)題的話一定要先查看page-skeleton-webpack-plugin的 issue
總結(jié)
以上所述是小編給大家介紹的vue 移動(dòng)端注入骨架屏的配置方法，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)歡迎給我留言，小編會(huì)及時(shí)回復(fù)大家的！
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)多標(biāo)簽選擇器，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-11-11
Vue.js devtool插件安裝后無(wú)法使用的解決辦法
Vue.js devtool插件最近在開發(fā)人員中很火，這篇文章主要為大家詳細(xì)介紹了Vue.js devtool插件安裝后無(wú)法使用，出現(xiàn)提示“vue.js not detected”的解決辦法2017-11-11
這篇文章主要介紹了Vue.js子組件向父組件通信的方法實(shí)例代碼，非常不錯(cuò)，具有一定的參考價(jià)借鑒價(jià)值，需要的朋友可以參考下2018-12-12
vue3點(diǎn)擊按鈕下載文件功能的代碼實(shí)現(xiàn)
在寫vue項(xiàng)目時(shí),有個(gè)需求是點(diǎn)擊表格中某一行的下載按鈕,然后開始下載這一行對(duì)應(yīng)的文件,所以本文小編給大家介紹了使用vue3實(shí)現(xiàn)點(diǎn)擊按鈕下載文件功能,文中有詳細(xì)的代碼示例供大家參考,需要的朋友可以參考下2024-01-01
vue數(shù)據(jù)傳遞--我有特殊的實(shí)現(xiàn)技巧
這篇文章主要介紹了vue數(shù)據(jù)傳遞一些特殊梳理技巧,需要的朋友可以參考下2018-03-03
vue3表單參數(shù)校驗(yàn)及正則表達(dá)式舉例詳解
最近項(xiàng)目中有一個(gè)校驗(yàn)身份證號(hào)手機(jī)號(hào)的業(yè)務(wù),索性給大家總結(jié)下,這篇文章主要給大家介紹了關(guān)于vue3表單參數(shù)校驗(yàn)及正則表達(dá)式的相關(guān)資料,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-04-04
自定義指令是用來(lái)操作DOM的。自定義指令就是一種有效的補(bǔ)充和擴(kuò)展，不僅可用于定義任何的DOM操作，并且是可復(fù)用的。這篇文章主要介紹了Vue.js自定義指令的用法與實(shí)例解析，一起看看吧2017-01-01
淺談在vue中使用mint-ui swipe遇到的問(wèn)題
今天小編就為大家分享一篇淺談在vue中使用mint-ui swipe遇到的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
vue el-date-picker 開始日期不能大于結(jié)束日期的實(shí)現(xiàn)代碼
這篇文章主要介紹了vue el-date-picker 開始日期不能大于結(jié)束日期的實(shí)現(xiàn)代碼,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2024-01-01
第一次寫Vue項(xiàng)目，要用到router.js,看了一下官方文檔，還是很懵逼，不知道怎么配置，又去看視頻查資料，最后終于搞定了。話不多說(shuō)，先上代碼，我再講一些要注意的細(xì)節(jié)2022-12-12