成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

給項(xiàng)目加一個(gè)骨架屏吧

jeffrey_up / 1571人閱讀

摘要：給項(xiàng)目加一個(gè)骨架屏吧骨架屏可以理解為是當(dāng)數(shù)據(jù)還未加載進(jìn)來(lái)前，頁(yè)面的一個(gè)空白版本，一個(gè)簡(jiǎn)單的關(guān)鍵渲染路徑。安裝過(guò)程中報(bào)錯(cuò)提示如下執(zhí)行這個(gè)命令使用我這個(gè)項(xiàng)目是基于腳手架開(kāi)發(fā)的。

給項(xiàng)目加一個(gè)骨架屏吧

骨架屏可以理解為是當(dāng)數(shù)據(jù)還未加載進(jìn)來(lái)前，頁(yè)面的一個(gè)空白版本，一個(gè)簡(jiǎn)單的關(guān)鍵渲染路徑。用戶會(huì)看到一個(gè)樣式簡(jiǎn)單，描繪了當(dāng)前頁(yè)面的大致框架的骨架屏頁(yè)面，然后骨架屏中各個(gè)占位部分被實(shí)際資源完全替換，這個(gè)過(guò)程中用戶會(huì)覺(jué)得內(nèi)容正在逐漸加載即將呈現(xiàn)，降低了用戶的焦躁情緒，使得加載過(guò)程主觀上變得流暢。

安裝

這里采用餓了么開(kāi)源的方案page-skeleton-webpack-plugin。

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

安裝過(guò)程中報(bào)錯(cuò)提示如下

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

執(zhí)行這個(gè)命令

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

我這個(gè)項(xiàng)目是基于vue-cli3腳手架開(kāi)發(fā)的。

第一步配置插件

創(chuàng)建一個(gè)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"), // 用來(lái)存儲(chǔ) shell 文件的地址
        staticDir: path.resolve(__dirname, "./dist"), // 最好和 `output.path` 相同
        routes: ["/"], // 將需要生成骨架屏的路由添加到數(shù)組中
        excludes: [".van-nav-bar", ".van-tabbar"]  // 需要忽略的css選擇器
      })
    ],
  },
  chainWebpack: (config) => {   // 解決vue-cli3腳手架創(chuàng)建的項(xiàng)目壓縮html 干掉導(dǎo)致骨架屏不生效
    if (process.env.NODE_ENV !== "development") {
      config.plugin("html").tap(opts => {
        opts[0].minify.removeComments = false
        return opts
      })
    }
    
  },
};

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

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

在你啟動(dòng) App 的根元素內(nèi)部添加
第三步：界面操作生成、寫(xiě)入骨架頁(yè)面

在開(kāi)發(fā)頁(yè)面中通過(guò) Ctrl|Cmd + enter 呼出插件交互界面，或者在在瀏覽器的 JavaScript 控制臺(tái)內(nèi)輸入toggleBar 呼出交互界面。

點(diǎn)擊交互界面中的按鈕，進(jìn)行骨架頁(yè)面的預(yù)覽，這一過(guò)程可能會(huì)花費(fèi) 20s 左右時(shí)間，當(dāng)插件準(zhǔn)備好骨架頁(yè)面后，會(huì)自動(dòng)通過(guò)瀏覽器打開(kāi)預(yù)覽頁(yè)面

掃描預(yù)覽頁(yè)面中的二維碼，可在手機(jī)端預(yù)覽骨架頁(yè)面，可以在預(yù)覽頁(yè)面直接編輯源碼，通過(guò)點(diǎn)擊右上角寫(xiě)入按鈕，將骨架頁(yè)面寫(xiě)入到 shell 文件夾中。

通過(guò) webpack 重新打包應(yīng)用，當(dāng)頁(yè)面重新啟動(dòng)后，就能夠在獲取到數(shù)據(jù)前看到應(yīng)用的骨架結(jié)構(gòu)了。

最終效果

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

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/104679.html

相關(guān)文章

  • vue+vant同一項(xiàng)目實(shí)現(xiàn)豆瓣電影加網(wǎng)易云音樂(lè)webapp-最佳練手項(xiàng)目

    摘要：很多小伙伴練手都會(huì)去仿寫(xiě)豆瓣電影或者網(wǎng)易云音樂(lè)，所以，這回干脆把兩個(gè)集合起來(lái)，具體長(zhǎng)什么樣，請(qǐng)各位看預(yù)覽或下面圖片啦。怎么折騰法呢比如豆瓣部分我使用了，網(wǎng)易云部分則沒(méi)有，網(wǎng)易的組件則是自己造的輪子，當(dāng)然在實(shí)際開(kāi)發(fā)中肯定不會(huì)這么搞啦。。 很多小伙伴練手都會(huì)去仿寫(xiě)豆瓣電影或者網(wǎng)易云音樂(lè)，所以，這回干脆把兩個(gè)集合起來(lái)，具體長(zhǎng)什么樣，請(qǐng)各位看預(yù)覽或下面圖片啦。 目的： 做這個(gè)項(xiàng)目最主要的目的是...

    suosuopuo 評(píng)論0 收藏0

  • Any-基于Laravel5.4新的權(quán)限管理后臺(tái)骨架

    摘要：最簡(jiǎn)化權(quán)限管理系統(tǒng)，基于開(kāi)發(fā)?；陂_(kāi)發(fā)，唯一優(yōu)化的是用權(quán)限和路由別名綁定，這樣代碼寫(xiě)好之后就可以直接使用。如果是超級(jí)管理員，即使沒(méi)有這個(gè)權(quán)限會(huì)自動(dòng)賦予權(quán)限給超級(jí)管理員角色。默認(rèn)管理員賬號(hào)密碼。然后正常執(zhí)行命令其他命令即可。 Any 最簡(jiǎn)化權(quán)限管理系統(tǒng)，基于 Laravel5.4 開(kāi)發(fā)。由于 Laravel5.5 發(fā)布推遲，只好先寫(xiě)個(gè) Laravel5.4版本的，后面再升級(jí)上去。演示地址...

    Lavender 評(píng)論0 收藏0

  • 前端骨架屏方案小結(jié)

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

    IntMain 評(píng)論0 收藏0

  • 前端骨架屏方案小結(jié)

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

    TerryCai 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

閱讀需要支付1元查看
<