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