給項目加一個骨架屏吧

jeffrey_up 發布于2019-08-23 18:06 / 1503人閱讀

摘要：給項目加一個骨架屏吧骨架屏可以理解為是當數據還未加載進來前，頁面的一個空白版本，一個簡單的關鍵渲染路徑。安裝過程中報錯提示如下執行這個命令使用我這個項目是基于腳手架開發的。

給項目加一個骨架屏吧

骨架屏可以理解為是當數據還未加載進來前，頁面的一個空白版本，一個簡單的關鍵渲染路徑。用戶會看到一個樣式簡單，描繪了當前頁面的大致框架的骨架屏頁面，然后骨架屏中各個占位部分被實際資源完全替換，這個過程中用戶會覺得內容正在逐漸加載即將呈現，降低了用戶的焦躁情緒，使得加載過程主觀上變得流暢。

安裝

這里采用餓了么開源的方案page-skeleton-webpack-plugin。

npm install --save-dev page-skeleton-webpack-plugin
npm install --save-dev html-webpack-plugin

安裝過程中報錯提示如下

ERROR: Failed to download Chromium r515411! Set "PUPPETEER_SKIP_CHROMIUM_DOWNLOA
D" env variable to skip download.

執行這個命令

npm config set puppeteer_download_host=https://storage.googleapis.com.cnpmjs.org

使用

我這個項目是基于vue-cli3腳手架開發的。

第一步配置插件

創建一個vue.config.js文件。

const { SkeletonPlugin } = require("page-skeleton-webpack-plugin")
const path = require("path")

module.exports = {
  configureWebpack: {
    plugins: [
      new SkeletonPlugin({
        pathname: path.resolve(__dirname, "./shell"), // 用來存儲 shell 文件的地址
        staticDir: path.resolve(__dirname, "./dist"), // 最好和 `output.path` 相同
        routes: ["/"], // 將需要生成骨架屏的路由添加到數組中
        excludes: [".van-nav-bar", ".van-tabbar"]  // 需要忽略的css選擇器
      })
    ],
  },
  chainWebpack: (config) => {   // 解決vue-cli3腳手架創建的項目壓縮html 干掉導致骨架屏不生效
    if (process.env.NODE_ENV !== "development") {
      config.plugin("html").tap(opts => {
        opts[0].minify.removeComments = false
        return opts
      })
    }
    
  },
};

在項目根目錄下面創建一個shell文件夾。
chainWebpack配置這個是解決vue-cli3打包的骨架屏不生效的BUG

第二步修改 HTML Webpack Plugin 插件的模板

在你啟動 App 的根元素內部添加

第三步：界面操作生成、寫入骨架頁面

在開發頁面中通過 Ctrl|Cmd + enter 呼出插件交互界面，或者在在瀏覽器的 JavaScript 控制臺內輸入toggleBar 呼出交互界面。

點擊交互界面中的按鈕，進行骨架頁面的預覽，這一過程可能會花費 20s 左右時間，當插件準備好骨架頁面后，會自動通過瀏覽器打開預覽頁面

掃描預覽頁面中的二維碼，可在手機端預覽骨架頁面，可以在預覽頁面直接編輯源碼，通過點擊右上角寫入按鈕，將骨架頁面寫入到 shell 文件夾中。

通過 webpack 重新打包應用，當頁面重新啟動后，就能夠在獲取到數據前看到應用的骨架結構了。

最終效果

demo 地址

https://vbook.langpz.com

我的博客和GitHub地址

https://github.com/lanpangzhi

http://blog.langpz.com

參考

https://github.com/cnpm/cnpmjs.org/issues/1246
https://github.com/ElemeFE/page-skeleton-webpack-plugin

云服務器 GPU云服務器給視頻加翅膀特效如何給網站加cdn js給視頻加水印給視頻加背景音樂

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/104679.html

vue+vant同一項目實現豆瓣電影加網易云音樂webapp-最佳練手項目

摘要：很多小伙伴練手都會去仿寫豆瓣電影或者網易云音樂，所以，這回干脆把兩個集合起來，具體長什么樣，請各位看預覽或下面圖片啦。怎么折騰法呢比如豆瓣部分我使用了，網易云部分則沒有，網易的組件則是自己造的輪子，當然在實際開發中肯定不會這么搞啦。。很多小伙伴練手都會去仿寫豆瓣電影或者網易云音樂，所以，這回干脆把兩個集合起來，具體長什么樣，請各位看預覽或下面圖片啦。目的：做這個項目最主要的目的是...

suosuopuo 2019-08-23 16:16 評論0 收藏0
Any-基于Laravel5.4新的權限管理后臺骨架

摘要：最簡化權限管理系統，基于開發。基于開發，唯一優化的是用權限和路由別名綁定，這樣代碼寫好之后就可以直接使用。如果是超級管理員，即使沒有這個權限會自動賦予權限給超級管理員角色。默認管理員賬號密碼。然后正常執行命令其他命令即可。 Any 最簡化權限管理系統，基于 Laravel5.4 開發。由于 Laravel5.5 發布推遲，只好先寫個 Laravel5.4版本的，后面再升級上去。演示地址...

Lavender 2019-06-28 13:17 評論0 收藏0
前端骨架屏方案小結

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

IntMain 2019-08-29 16:58 評論0 收藏0
前端骨架屏方案小結

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

TerryCai 2019-08-02 11:42 評論0 收藏0