vue 移動端注入骨架屏

eechen 發(fā)布于2019-08-23 18:17 / 362人閱讀

摘要：本文就是根據(jù)實現(xiàn)的骨架屏的實現(xiàn)，基于的是進(jìn)行采坑。大家可能發(fā)現(xiàn)有個，其實就是一個啟動本地的一個，配置好的骨架屏需要查看打包后的文件，方能查看效果，當(dāng)然可以從官網(wǎng)這邊可以可以看到，具體涉及到里面很多的細(xì)節(jié)需要大家一起采坑。

什么是骨架屏？

簡單的說，骨架屏就是在頁面未渲染完成的時候，先用一些簡單的圖形大致勾勒出頁面的基本輪廓，給用戶造成頁面正在加載的錯覺，待頁面渲染完成之后再用頁面替換掉骨架屏，從而減少頁面白屏的時間，給用戶帶來更好的體驗。本文就是根據(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

GPU云服務(wù)器云服務(wù)器滑屏移動視圖類移動端海外移動端移動端推送

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/104970.html

相關(guān)文章

【骨架屏】【vue】如何在webpack+vue+vue-cli下搭建多模塊/單模塊多路由骨架屏

摘要：如何在下搭建多模塊單模塊多路由骨架屏前言骨架屏的用戶感知比更好，此前看過很多專欄以及文章，此次實踐中還是遇到需要學(xué)習(xí)的部分。包括因為可能信息面不全，對插件源碼進(jìn)行了詳細(xì)解讀，希望對于將要在項目中搭建骨架屏的小伙伴們有所幫助。如何在webpack+vue+vue-cli下搭建多模塊/單模塊多路由骨架屏前言骨架屏的用戶感知比loading更好，此前看過很多專欄以及文章，此次實踐中還是...

huhud 2019-08-02 16:07 評論0 收藏0
【骨架屏】【vue】如何在webpack+vue+vue-cli下搭建多模塊/單模塊多路由骨架屏

摘要：如何在下搭建多模塊單模塊多路由骨架屏前言骨架屏的用戶感知比更好，此前看過很多專欄以及文章，此次實踐中還是遇到需要學(xué)習(xí)的部分。包括因為可能信息面不全，對插件源碼進(jìn)行了詳細(xì)解讀，希望對于將要在項目中搭建骨架屏的小伙伴們有所幫助。如何在webpack+vue+vue-cli下搭建多模塊/單模塊多路由骨架屏前言骨架屏的用戶感知比loading更好，此前看過很多專欄以及文章，此次實踐中還是...

MkkHou 2019-08-23 14:07 評論0 收藏0
用vue從零開發(fā)和部署一款移動端pwa單頁應(yīng)用

摘要：另外，單頁應(yīng)用因為數(shù)據(jù)前置到了前端，不利于搜索引擎的抓取。所以我們需要對自己的單頁應(yīng)用進(jìn)行一些優(yōu)化。前言最近秋招之余空出時間來按自己的興趣動手做了一個項目，一個基于vue-cli3.0, vue，typescript的移動端pwa，現(xiàn)在趁熱打鐵，將這個項目從開發(fā)到部署整個過程記錄下來，并將從這個項目中學(xué)習(xí)到的東西分享出來，如果大家有什么意見或補充也可以在評論區(qū)提出。先介紹一下這個項...

Channe 2019-07-25 14:28 評論0 收藏0
用純 DOM 的方式結(jié)合 Puppeteer 自動生成網(wǎng)頁骨架屏

摘要：可以通過的提供的直接控制模擬大部分用戶操作來進(jìn)行或者作為爬蟲訪問頁面來收集數(shù)據(jù)。 ??骨架屏是在頁面數(shù)據(jù)尚未加載完成前先給用戶展示出頁面的大致結(jié)構(gòu)，直到請求數(shù)據(jù)返回后再顯示真正的頁面內(nèi)容；隨著單頁應(yīng)用（ SPA ）的越來越流行，單頁應(yīng)用的用戶體驗也越來越得到前端開發(fā)者的關(guān)注；為了優(yōu)化用戶體驗，在數(shù)據(jù)到達(dá)用戶之前，往往會在頁面上加上 loading 的效果，而現(xiàn)在，越來越多的場景傾向于使...

BlackHole1 2019-08-23 12:19 評論0 收藏0
前端骨架屏方案小結(jié)

摘要：常用于文章列表動態(tài)列表頁等相對比較規(guī)則的列表頁面。很多項目中都有應(yīng)用餓了么版本知乎等網(wǎng)站中都有應(yīng)用。歡迎討論，點個贊再走吧骨架屏最近在項目不時有用到骨架屏的需求,所以抽時間對骨架屏的方案作了一下調(diào)研,骨架屏的實踐已經(jīng)有很多了,也有很多人對自己的方案作了介紹.在這里按照個人的理解做了一個匯總和分類,分享給大家. 關(guān)于骨架屏(簡介) 骨架屏就是在頁面數(shù)據(jù)尚未加載前先給用戶展示出頁面的大...

IntMain 2019-08-29 16:58 評論0 收藏0