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