给Vue项目加一个骨架屏吧

最新推荐文章于 2023-12-25 18:35:43 发布

前端小苑-FE GDN

最新推荐文章于 2023-12-25 18:35:43 发布

阅读量238

点赞数

原文链接：https://mp.weixin.qq.com/mp/homepage?__biz=Mzg2NTA4NTIwNA==\x26amp;hid=2\x26amp;sn=4d5343fcd8f4b00e3e9e76bf7b7319b5\x26amp;scene=25#wechat_redirect

版权

点击上方“前端小苑”，选择“置顶公众号”

精品技术文章，热门资讯第一时间送达

星期五，你好

骨架屏可以理解为是当数据还未加载进来前，页面的一个空白版本，一个简单的关键渲染路径。

用户会看到一个样式简单，描绘了当前页面的大致框架的骨架屏页面，然后骨架屏中各个占位部分被实际资源完全替换，这个过程中用户会觉得内容正在逐渐加载即将呈现，降低了用户的焦躁情绪，使得加载过程主观上变得流畅。

安装

这里采用饿了么开源的方案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 干掉<!-- shell -->导致骨架屏不生效
    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 的根元素内部添加

<body>
  <div id="app"><!-- shell --></div>
  <!-- built files will be auto injected -->
</body>

第三步：界面操作生成、写入骨架页面

在开发页面中通过 Ctrl|Cmd + enter 呼出插件交互界面，或者在在浏览器的 JavaScript 控制台内输入toggleBar 呼出交互界面。
点击交互界面中的按钮，进行骨架页面的预览，这一过程可能会花费 20s 左右时间，当插件准备好骨架页面后，会自动通过浏览器打开预览页面
扫描预览页面中的二维码，可在手机端预览骨架页面，可以在预览页面直接编辑源码，通过点击右上角写入按钮，将骨架页面写入到 shell 文件夹中。
通过 webpack 重新打包应用，当页面重新启动后，就能够在获取到数据前看到应用的骨架结构了。

最终效果

demo 地址

https://vbook.langpz.com/

参考

https://github.com/cnpm/cnpmjs.org/issues/1246

github地址：https://github.com/ElemeFE/page-skeleton-webpack-plugin

原文作者：jilei786

文章来源：掘金

原文地址：https://juejin.im/post/5d01e84451882565b4602840

更多精选文章

vue3.0抢先看（附尤雨溪vue分享ppt）

JS是世界上最好的语言—— 使用Electron开发桌面应用(一)

轻松搞定时间复杂度

你能找到心仪的妹子吗？- 时间复杂度进阶

深入vue - 源码目录及构建过程分析

深入vue -- Virtual Dom是如何被创建的

不仅仅是算法--二分查找（binary search）的心路历程

Node+GitLab实现小程序CI系统

还在手动维护项目的更新日志吗？那你就OUT了！

小程序第三方框架对比 ( wepy / mpvue / taro )

点击“阅读原文”，查看更多精品文章

点一下你会更好看耶