给项目加一个骨架屏吧

jeffrey_up 发布于2019-08-23 18:06 / 1501人阅读

摘要：给项目加一个骨架屏吧骨架屏可以理解为是当数据还未加载进来前，页面的一个空白版本，一个简单的关键渲染路径。安装过程中报错提示如下执行这个命令使用我这个项目是基于脚手架开发的。

给项目加一个骨架屏吧

骨架屏可以理解为是当数据还未加载进来前，页面的一个空白版本，一个简单的关键渲染路径。用户会看到一个样式简单，描绘了当前页面的大致框架的骨架屏页面，然后骨架屏中各个占位部分被实际资源完全替换，这个过程中用户会觉得内容正在逐渐加载即将呈现，降低了用户的焦躁情绪，使得加载过程主观上变得流畅。

安装

这里采用饿了么开源的方案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给视频加水印给视频加背景音乐

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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