vue 移動(dòng)端注入骨架屏的配置方法
什么是骨架屏？
簡(jiǎn)單的說(shuō)，骨架屏就是在頁(yè)面未渲染完成的時(shí)候，先用一些簡(jiǎn)單的圖形大致勾勒出頁(yè)面的基本輪廓，給用戶(hù)造成頁(yè)面正在加載的錯(cuò)覺(jué)，待頁(yè)面渲染完成之后再用頁(yè)面替換掉骨架屏，從而減少頁(yè)面白屏的時(shí)間，給用戶(hù)帶來(lái)更好的體驗(yàn)。本文就是根據(jù) page-skeleton-webpack-plugin 實(shí)現(xiàn)的骨架屏的實(shí)現(xiàn)，基于的是vue-cli3進(jìn)行采坑 。
項(xiàng)目開(kāi)始
安裝依賴(lài)，package.json
配置vue.config.js
需要在新建vue.config.js，把之前的下載好的page-skeleton-webpack-plugin引入進(jìn)行配置，詳細(xì)的配置如下自定義配置可以查看官方的配置
配置postcss自定義的適配方案，具體的配置 請(qǐng)點(diǎn)擊查看 ，如下：
配置完成
按照上面的依賴(lài)配置完成的話就可以查看啦。大家可能發(fā)現(xiàn)有個(gè)node.js，其實(shí)就是一個(gè)啟動(dòng)本地serve的一個(gè)js，配置好的骨架屏需要查看打包后的dist文件，方能查看效果，
當(dāng)然可以從官網(wǎng)這邊可以可以看到，具體涉及到里面很多的細(xì)節(jié)需要大家一起采坑。加油~~~~
項(xiàng)目地址
項(xiàng)目地址 ， 如果覺(jué)得幫助你 麻煩給個(gè)star
其他
ps:如果安裝依賴(lài)出問(wèn)題的話一定要先查看page-skeleton-webpack-plugin的 issue
總結(jié)
以上所述是小編給大家介紹的vue 移動(dòng)端注入骨架屏的配置方法，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)歡迎給我留言，小編會(huì)及時(shí)回復(fù)大家的！
相關(guān)文章
ElementUI如何修改el-cascader的默認(rèn)樣式
ElementUI 是一套u(yù)i組件庫(kù)，目前最新版本 react 和 vue 等主流框架都有支持。該庫(kù)默認(rèn)主題色是天藍(lán)色，若用于項(xiàng)目開(kāi)發(fā)，難免遇到要需求修改其默認(rèn)樣式的情況，這篇文章主要介紹了ElementUI如何修改el-cascader的默認(rèn)樣式,需要的朋友可以參考下2023-12-12
這篇文章主要為大家介紹了vuex的五個(gè)核心概念和基本使用，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助2022-09-09
vue element-ui中table合計(jì)指定列求和實(shí)例
這篇文章主要介紹了vue element-ui中table合計(jì)指定列求和實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-11-11
這篇文章主要介紹了vue中如何使用jest單元測(cè)試，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
基于Vue實(shí)現(xiàn)文件上傳的幾種實(shí)現(xiàn)方式
文件上傳是web開(kāi)發(fā)中一個(gè)常見(jiàn)的需求,Vue.js作為一款流行的前端框架,也提供了方便的方法來(lái)實(shí)現(xiàn)文件上傳功能,下面這篇文章主要給大家介紹了關(guān)于基于Vue實(shí)現(xiàn)文件上傳的幾種實(shí)現(xiàn)方式,需要的朋友可以參考下2024-03-03
這篇文章主要介紹了vue3中如何獲取proxy包裹的數(shù)據(jù)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-05-05
vue element 生成無(wú)線級(jí)左側(cè)菜單的實(shí)現(xiàn)代碼
這篇文章主要介紹了vue element 生成無(wú)線級(jí)左側(cè)菜單的實(shí)現(xiàn)代碼，代碼簡(jiǎn)單易懂，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-08-08
vue select組件的使用與禁用實(shí)現(xiàn)代碼
這篇文章主要介紹了vue--select組件的使用與禁用的實(shí)現(xiàn)代碼，非常不錯(cuò)，具有參考借鑒價(jià)值 ,需要的朋友可以參考下2018-04-04
基于vue實(shí)現(xiàn)swipe輪播組件實(shí)例代碼
本篇文章主要介紹了基于vue實(shí)現(xiàn)swipe輪播組件實(shí)例代碼，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-05-05
這篇文章主要介紹了詳解vuex的簡(jiǎn)單使用,小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-03-03