首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

Vue页面骨架屏的实现方法

Posted in Javascript onMay 22, 2018

在开发webapp的时候总是会受到首屏加载时间过长的影响，主流的解决方法是在载入完成之前显示loading图效果，而一些大公司会配置一套服务端渲染的架构来解决这个问题。考虑到ssr所要解决的一系列问题，越来越多的APP采用了“骨架屏”的方式去提升用户体验。

小米商城：

Vue页面骨架屏的实现方法

一、分析Vue页面的内容加载过程

vue项目中的入口index.html只有简单的内容：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
  <title>Document</title>
</head>
<body>
  <div id="root">    
  </div>
  <script type="text/javascript" src="bundle.js"></script></body>
</body>
</html>

当js执行完之后，会用vue渲染成的dom将div#root完全替换掉。

我们在div#root中加入模拟骨架屏，在Chrome开发者工具调整网速：

<div id="root">
  这里是骨架屏
</div>

Vue页面骨架屏的实现方法

由此可知，将骨架屏内容直接插入div#root中即可实现骨架屏。

二、使用vue-server-renderer来实现骨架屏

我们需要骨架屏也是一个单独的.vue文件，因此我们需要用到vue-server-renderer。对vue服务端渲染有所了解的同学一定知道，这个插件能够将vue项目在node端打包成一个bundle，然后由bundle生成对应的html。
首先是生成项目：

.
├── build
│  ├── webpack.config.client.js
│  └── webpack.config.server.js
├── src
│  └── views
│    ├── index
│    │  └── index.vue
│    ├── skeleton
│    │  └── skeleton.vue
│    ├── app.vue
│    ├── index.js
│    └── skeleton-entry.js
├── index.html
└── skeleton.js
└── package.json

vue的服务端渲染一般会用vue-server-renderer将整个项目在node端打包成一份bundle，而这里我们只要一份有骨架屏的html，所以会有一个单独的骨架屏入口文件skeleton-entry.js,一个骨架屏打包webpack配置webpack.config.server.js，而skeleton.js作用是将webpack打包出来的bundle写入到index.html中。

//skeleton-entry.js
import Vue from 'vue'
import Skeleton from './views/skeleton/skeleton.vue'

export default new Vue({
 components: {
  Skeleton
 },
 template: '<skeleton />'
})
//webpack.config.server.js
const path = require('path')
const { VueLoaderPlugin } = require('vue-loader')
const VueSSRServerPlugin = require('vue-server-renderer/server-plugin')

module.exports = {
 mode: process.env.NODE_ENV,
 target: 'node',
 entry: path.join(__dirname, '../src/skeleton-entry.js'),
 output: {
  path: path.join(__dirname, '../server-dist'),
  filename: 'server.bundle.js',
  libraryTarget: 'commonjs2'
 },
 module: {
  rules: [
   {
    test: /\.vue$/,
    loader: 'vue-loader'
   },
   {
    test: /\.css$/,
    use: [
     'vue-style-loader',
     'css-loader'
    ]
   }  
  ]
 },
 externals: Object.keys(require('../package.json').dependencies),
 resolve: {
  alias: {
   'vue$': 'vue/dist/vue.esm.js'
  }
 },
 plugins: [
  new VueLoaderPlugin(),
  new VueSSRServerPlugin({
   filename: 'skeleton.json'
  })
 ]
}

其中骨架屏的webpack配置因为是node端，所以需要target: 'node' libraryTarget: 'commonjs2'。在VueSSRServerPlugin中，指定了其输出的json文件名。当执行webpack会在/server-dist目录下生成一个skeleton.json文件,这个文件记载了骨架屏的内容和样式，会提供给vue-server-renderer使用。

//skeleton.js
const fs = require('fs')
const path = require('path')

const createBundleRenderer = require('vue-server-renderer').createBundleRenderer

// 读取`skeleton.json`，以`index.html`为模板写入内容
const renderer = createBundleRenderer(path.join(__dirname, './server-dist/skeleton.json'), {
 template: fs.readFileSync(path.join(__dirname, './index.html'), 'utf-8')
})

// 把上一步模板完成的内容写入（替换）`index.html`
renderer.renderToString({}, (err, html) => {
 fs.writeFileSync('index.html', html, 'utf-8')
})

注意，作为模板的html文件，需要在被写入内容的位置添加<!--vue-ssr-outlet-->占位符，本例子在div#root里写入：

<div id="root">
<!--vue-ssr-outlet-->
</div>

最后执行node skeleton就能实现vue的骨架屏。

最终的index.html:

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <title>Document</title>
<style data-vue-ssr-id="a7049cb4:0">
.skeleton[data-v-61761ff8] {
 position: relative;
 height: 100%;
 overflow: hidden;
 padding: 15px;
 box-sizing: border-box;
 background: #fff;
}
.skeleton-nav[data-v-61761ff8] {
 height: 45px;
 background: #eee;
 margin-bottom: 15px;
}
.skeleton-swiper[data-v-61761ff8] {
 height: 160px;
 background: #eee;
 margin-bottom: 15px;
}
.skeleton-tabs[data-v-61761ff8] {
 list-style: none;
 padding: 0;
 margin: 0 -15px;
 display: flex;
 flex-wrap: wrap;
}
.skeleton-tabs-item[data-v-61761ff8] {
 width: 25%;
 height: 55px;
 box-sizing: border-box;
 text-align: center;
 margin-bottom: 15px;
}
.skeleton-tabs-item span[data-v-61761ff8] {
 display: inline-block;
 width: 55px;
 height: 55px;
 border-radius: 55px;
 background: #eee;
}
.skeleton-banner[data-v-61761ff8] {
 height: 60px;
 background: #eee;
 margin-bottom: 15px;
}
.skeleton-productions[data-v-61761ff8] {
 height: 20px;
 margin-bottom: 15px;
 background: #eee;
}
</style></head>
<body>
  <div id="root">
    <div data-server-rendered="true" class="skeleton page" data-v-61761ff8><div class="skeleton-nav" data-v-61761ff8></div> <div class="skeleton-swiper" data-v-61761ff8></div> <ul class="skeleton-tabs" data-v-61761ff8><li class="skeleton-tabs-item" data-v-61761ff8><span data-v-61761ff8></span></li><li class="skeleton-tabs-item" data-v-61761ff8><span data-v-61761ff8></span></li><li class="skeleton-tabs-item" data-v-61761ff8><span data-v-61761ff8></span></li><li class="skeleton-tabs-item" data-v-61761ff8><span data-v-61761ff8></span></li><li class="skeleton-tabs-item" data-v-61761ff8><span data-v-61761ff8></span></li><li class="skeleton-tabs-item" data-v-61761ff8><span data-v-61761ff8></span></li><li class="skeleton-tabs-item" data-v-61761ff8><span data-v-61761ff8></span></li><li class="skeleton-tabs-item" data-v-61761ff8><span data-v-61761ff8></span></li></ul> <div class="skeleton-banner" data-v-61761ff8></div> <div class="skeleton-productions" data-v-61761ff8></div><div class="skeleton-productions" data-v-61761ff8></div><div class="skeleton-productions" data-v-61761ff8></div><div class="skeleton-productions" data-v-61761ff8></div><div class="skeleton-productions" data-v-61761ff8></div><div class="skeleton-productions" data-v-61761ff8></div></div>
  </div>
</body>
</html>

看下效果：

Vue页面骨架屏的实现方法

效果还是阔以的。

尾声

文章开头小米商城手机页面就是用的这样的方法，不同的是它的骨架屏是一个base64的图片。

更多关于vue-server-renderer内容请戳vue-ssr

文章相关代码已经同步到Github，欢迎查阅~

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持三水点靠木。

Vue页面骨架屏的实现方法

- Author -

RThong

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
尽可能写&quot;友好&quot;的&quot;Javascript&quot;代码
Jan 09 Javascript
javascript获取选中的文本的方法代码
Oct 30 Javascript
js 3种归并操作的实例代码
Oct 30 Javascript
JS动态改变表格边框宽度的方法
Mar 31 Javascript
js实现仿微博滚动显示信息的效果
Dec 21 Javascript
再谈JavaScript异步编程
Jan 27 Javascript
AngularJs directive详解及示例代码
Sep 01 Javascript
jQuery异步提交表单的两种方式
Sep 13 Javascript
xmlplus组件设计系列之列表（4）
Apr 26 Javascript
Vuejs 2.0 子组件访问/调用父组件的方法(示例代码)
Feb 08 Javascript
详解vue-admin和后端(flask)分离结合的例子
Feb 12 Javascript
vue实现在v-html的html字符串中绑定事件
Oct 28 Javascript
Angular网络请求的封装方法
May 22 #Javascript
vue input输入框模糊查询的示例代码
May 22 #Javascript
vue 中swiper的使用教程
May 22 #Javascript
vue配置多页面的实现方法
May 22 #Javascript
vue.js使用v-model指令实现的数据双向绑定功能示例
May 22 #Javascript
详解js类型判断
May 22 #Javascript
vue.js过滤器+ajax实现事件监听及后台php数据交互实例
May 22 #Javascript
大话西游(1) 遗弃(1) 原神(1) 绿林侠盗(1) AGC(1) FS1016(1) 模拟人生(1) 吸血鬼(1) 死亡搁浅(1) 铁拳(1)
You might like
解析coreseek for sphinx的使用
2013/06/21 PHP
php保存任意网络图片到服务器的方法
2015/04/14 PHP
Yii 框架控制器创建使用及控制器响应操作示例
2019/10/14 PHP
Swoole源码中如何查询Websocket的连接问题详解
2020/08/30 PHP
Firefox getBoxObjectFor getBoundingClientRect联系
2008/10/26 Javascript
Js注册协议倒计时的小例子
2013/06/24 Javascript
jquery iframe操作详细解析
2013/11/20 Javascript
跟我学Nodejs（一）--- Node.js简介及安装开发环境
2014/05/20 NodeJs
移动手机APP手指滑动切换图片特效附源码下载
2015/11/30 Javascript
纯JS实现轮播图
2017/02/22 Javascript
Vue上传组件vue Simple Uploader的用法示例
2017/08/25 Javascript
JS实现百度搜索接口及链接功能实例代码
2018/02/02 Javascript
vue router+vuex实现首页登录验证判断逻辑
2018/05/17 Javascript
在JS循环中使用async/await的方法
2018/10/12 Javascript
nodejs实现获取本地文件夹下图片信息功能示例
2019/06/22 NodeJs
vue页面更新patch的实现示例
2020/03/25 Javascript
JS实现简易图片自动轮播
2020/10/16 Javascript
微信小程序反编译的实现
2020/12/10 Javascript
[01:00:49]DOTA2-DPC中国联赛 正赛 Ehome vs iG BO3 第二场 1月31日
2021/03/11 DOTA
Python 忽略warning的输出方法
2018/10/18 Python
python替换字符串中的子串图文步骤
2019/06/19 Python
Python垃圾回收机制三种实现方法
2020/04/27 Python
python中子类与父类的关系基础知识点
2021/02/02 Python
canvas 橡皮筋式线条绘图应用方法
2019/02/13 HTML / CSS
轻金属冶金专业毕业生自荐信
2013/11/02 职场文书
幼儿如何来做好自我评价
2013/11/05 职场文书
军训的自我鉴定
2013/12/10 职场文书
酒店led欢迎词
2014/01/09 职场文书
银行竞聘演讲稿范文
2014/04/23 职场文书
2014年团员学习十八大思想汇报
2014/09/13 职场文书
专题组织生活会思想汇报
2014/10/01 职场文书
大学生党员自我剖析材料
2014/10/06 职场文书
采购员岗位职责
2015/02/03 职场文书
淘宝客服专员岗位职责
2015/04/07 职场文书
学生检讨书怎么写
2015/05/07 职场文书
2015年度考核个人工作总结
2015/10/24 职场文书