国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

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

jeffrey_up / 1513人閱讀

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

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

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

安裝

這里采用餓了么開源的方案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.

執(zhí)行這個命令

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

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

第一步配置插件

創(chuàng)建一個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: ["/"], // 將需要生成骨架屏的路由添加到數(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)建一個shell文件夾。
chainWebpack配置 這個是解決vue-cli3打包的骨架屏不生效的BUG

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

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

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

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

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

通過 webpack 重新打包應(yīng)用，當(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)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

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

相關(guān)文章

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

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

    suosuopuo 評論0 收藏0

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

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

    Lavender 評論0 收藏0

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

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

    IntMain 評論0 收藏0

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

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

    TerryCai 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<