详解VUE单页应用骨架屏方案


Posted in Javascript onJanuary 17, 2019

什么是骨架屏?

简单的说,骨架屏就是在页面未渲染完成的时候,先用一些简单的图形大致勾勒出页面的基本轮廓,给用户造成页面正在加载的错觉,待页面渲染完成之后再用页面替换掉骨架屏,从而减少页面白屏的时间,给用户带来更好的体验。

详解VUE单页应用骨架屏方案

分析VUE渲染过程

使用vue-cli3.0创建项目: vue create project

详解VUE单页应用骨架屏方案 

详解VUE单页应用骨架屏方案 

详解VUE单页应用骨架屏方案 

详解VUE单页应用骨架屏方案 

详解VUE单页应用骨架屏方案 

详解VUE单页应用骨架屏方案 


详解VUE单页应用骨架屏方案 

详解VUE单页应用骨架屏方案

在生成的项目文件夹下的public文件夹下的index.html文件代码如下:

<!DOCTYPE html>
<html lang="en">
 <head>
 <meta charset="utf-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width,initial-scale=1.0">
 <link rel="icon" href="<%= BASE_URL %>favicon.ico" rel="external nofollow" >
 <title>project</title>
 </head>
 <body>
 <noscript>
  <strong>We're sorry but project doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
 </noscript>
 <div id="app"></div>
 <!-- built files will be auto injected -->
 </body>
</html>

可以看到,DOM里面有一个div#app,当js被执行完成之后,此div#app会被整个替换掉,因此,如何在Vue页面实现骨架屏,已经有了一个很清晰的思路——在div#app内直接插入骨架屏相关内容即可。

实现方案

手动在div#app里面写入骨架屏内容是不科学的,因此需要一个扩展性强且自动化的易维护方案。既然是在Vue项目里,所以所谓的骨架屏也是一个.vue文件,它能够在构建时由工具自动注入到div#app里面。 首先,我们在/src目录下新建一个Skeleton.vue文件,其内容如下:

<template>
 <div class="skeleton page">
 <div class="skeleton-nav"></div>
 <div class="skeleton-swiper">
  <div class="skeleton-swiper-item item-one"></div>
  <div class="skeleton-swiper-item item-two"></div>
 </div>
 </div>
</template>

<style>
html,body,div{
 margin:0;
 padding:0;
}
.skeleton {
 height: 100%;
 overflow: hidden;
 box-sizing: border-box;
 background: #fff;
}
.skeleton-nav {
 height: 54px;
 background: #eee;
 margin-bottom: 20px;
}
.skeleton-swiper {
 min-height:600px;
 max-width:1280px;
 margin:0 auto;
}
.skeleton-swiper-item{
 min-height: 600px;
 height:100%;
 background:#eee;
 border-radius:5px;
}
.item-one{
 width:20%;
 float:left;
}
.item-two{
 width:78%;
 float:right;
}
</style>

接下来,在/src目录再新建一个skeleton.entry.js入口文件:

import Vue from 'vue';
import Skeleton from './Skeleton.vue';

export default new Vue({
 components: {
  Skeleton,
 },
 template: '<skeleton />',
});

在完成了骨架屏的准备之后,我们需要一个关键插件vue-server-renderer。该插件本用于服务端渲染,但是在这里,我们主要利用它能够把.vue文件处理成html和css字符串的功能,来完成骨架屏的注入。

骨架屏注入

首先在public文件夹下新建一个template.html文件,并且其代码和index.html文件代码相同,但是需要在div#app中添加 <!--vue-ssr-outlet--> 占位符:

<!DOCTYPE html>
<html lang="en">
 <head>
 <meta charset="utf-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width,initial-scale=1.0">
 <link rel="icon" href="./favicon.ico" rel="external nofollow" >
 <title>医生工作台</title>
 </head>
 <body>
 <noscript>
  <strong>We're sorry but yz_doctors doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
 </noscript>
 <div id="app"><!--vue-ssr-outlet--></div>
 <!-- built files will be auto injected -->
 </body>
</html>

然后,我们还需要在根目录新建一个webpack.skeleton.conf.js文件,以专门用来进行骨架屏的构建。

const path = require('path');
const webpack = require('webpack');
const nodeExternals = require('webpack-node-externals');
const VueSSRServerPlugin = require('vue-server-renderer/server-plugin');
const VueLoaderPlugin = require('vue-loader/lib/plugin');
module.exports = {
 target: 'node',
 entry: {
  skeleton: './src/skeleton.entry.js',
 },
 output: {
  path: path.resolve(__dirname, './dist'),
  publicPath: '/dist/',
  filename: '[name].js',
  libraryTarget: 'commonjs2',
 },
 module: {
  rules: [
   {
    test: /\.css$/,
    use: [
     'vue-style-loader',
     'css-loader',
    ],
   },
   {
    test: /\.vue$/,
    loader: 'vue-loader',
   },
  ],
 },
 externals: nodeExternals({
  whitelist: /\.css$/,
 }),
 resolve: {
  alias: {
   'vue$': 'vue/dist/vue.esm.js',
  },
  extensions: ['*', '.js', '.vue', '.json'],
 },
 plugins: [
  new VueLoaderPlugin(),
  new VueSSRServerPlugin({
   filename: 'skeleton.json',
  }),
 ],
};

可以看到,该配置文件和普通的配置文件基本完全一致,主要的区别在于其target: 'node',配置了externals,以及在plugins里面加入了VueSSRServerPlugin。在VueSSRServerPlugin中,指定了其输出的json文件名。然后通过运行下列指令,在/dist目录下生成一个skeleton.json文件: webpack --config ./webpack.skeleton.conf.js 接下来,在根目录下新建一个skeleton.js,该文件即将被用于往index.html内插入骨架屏:

const fs = require('fs');
const { resolve } = require('path');
const htmlMinifier = require('html-minifier');
const createBundleRenderer = require('vue-server-renderer').createBundleRenderer;

// 先把vue的模板文件index.html置换成标准的模板,防止骨架屏污染
let tempData = fs.readFileSync(resolve(__dirname, './public/template.html'), 'utf-8');
fs.writeFileSync('./public/index.html', tempData, 'utf-8');
console.log('模板注入完成');
// 读取`skeleton.json`,以`index.html`为模板写入内容
const renderer = createBundleRenderer(resolve(__dirname, './dist/skeleton.json'), {
 template: fs.readFileSync(resolve(__dirname, './public/index.html'), 'utf-8'),
});

// 把上一步模板完成的内容写入(替换)`index.html`
renderer.renderToString({}, (err, html) => {
 if (err) {
  console.log(err);
  return;
 }
 html = htmlMinifier.minify(html, {
  collapseWhitespace: true,
  minifyCSS: true,
 });
 fs.writeFileSync('./public/index.html', html, 'utf-8');
});
console.log('骨架屏注入完成');

接下来,只要运行 node skeleton.js ,就可以完成骨架屏的注入。 为了在 npm run serve 的时候自动完成骨架屏的注入,避免运行多次命令,需要在 package.json 中增加一条命令 "preserve": "webpack --config ./webpack.skeleton.conf.js && node skeleton.js" ,放在 "serve" 命令之前。

总结

新建template.html文件的目的是为了保存模板文件的干净,因为每次完成骨架屏的注入后index.html文件中的 <!--vue-ssr-outlet--> 占位符已经被骨架屏代码所替换,再次修改骨架屏后就无法完成骨架屏的注入啦,所以在注入骨架屏时先用template.html文件中的内容替换index.html文件,避免了每次修改骨架屏时还要手动修改index.html文件,运行一条命令实现骨架屏的自动注入。

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

Javascript 相关文章推荐
用于自动添加Digg This!按钮的JavaScript
Dec 23 Javascript
为jquery.ui.dialog 增加“在当前鼠标位置打开”的功能
Nov 24 Javascript
node.js中的fs.utimes方法使用说明
Dec 15 Javascript
JQuery实现左右滚动菜单特效
Sep 28 Javascript
在JavaScript中调用Java类和接口的方法
Sep 07 Javascript
Javascript中this绑定的3种方法与比较
Oct 13 Javascript
使用UrlConnection实现后台模拟http请求的简单实例
Jan 04 Javascript
vue组件实例解析
Jan 10 Javascript
Javascript自定义事件详解
Jan 13 Javascript
webpack4.0打包优化策略整理小结
Mar 30 Javascript
如何用Node写页面爬虫的工具集
Oct 26 Javascript
使用Vue开发自己的Chrome扩展程序过程详解
Jun 21 Javascript
Jquery获取radio选中值实例总结
Jan 17 #jQuery
js中call()和apply()改变指针问题的讲解
Jan 17 #Javascript
js中怎么判断两个字符串相等的实例
Jan 17 #Javascript
js中null与空字符串&quot;&quot;的区别讲解
Jan 17 #Javascript
vue中$nextTick的用法讲解
Jan 17 #Javascript
vue项目打包之后背景样式丢失的解决方案
Jan 17 #Javascript
js中Array对象的常用遍历方法详解
Jan 17 #Javascript
You might like
PHP5 字符串处理函数大全
2010/03/23 PHP
php下正则来匹配dede模板标签的代码
2010/08/21 PHP
PHP 类相关函数的使用详解
2013/05/10 PHP
php微信开发自定义菜单
2016/08/27 PHP
Laravel 6 将新增为指定队列任务设置中间件的功能
2019/08/06 PHP
PHP哈希表实现算法原理解析
2020/12/11 PHP
jQuery ui 1.7更新小结
2009/08/15 Javascript
异步加载script的代码
2011/01/12 Javascript
JQuery实现简单时尚快捷的气泡提示插件
2012/12/20 Javascript
构造函数+原型模式构造js自定义对象(最通用)
2014/05/12 Javascript
js计算德州扑克牌面值的方法
2015/03/04 Javascript
js小数运算出现多位小数如何解决
2015/10/08 Javascript
小白谈谈对JS原型链的理解
2016/05/03 Javascript
AngularJS 简单应用实例
2016/07/28 Javascript
Javascript获取background属性中url的值
2016/10/17 Javascript
解析利用javascript如何判断一个数为素数
2016/12/08 Javascript
Bootstrap Search Suggest使用例子
2016/12/21 Javascript
JavaScript中利用for循环遍历数组
2017/01/15 Javascript
JavaScript 实现自己的安卓手机自动化工具脚本(推荐)
2020/05/13 Javascript
vue实践---根据不同环境,自动转换请求的url地址操作
2020/09/21 Javascript
JavaScript缓动动画函数的封装方法
2020/11/25 Javascript
python实现html转ubb代码(html2ubb)
2014/07/03 Python
Python中的引用和拷贝浅析
2014/11/22 Python
Django中使用group_by的方法
2015/05/26 Python
Python贪吃蛇游戏编写代码
2020/10/26 Python
django manage.py扩展自定义命令方法
2018/05/27 Python
Python全局变量与局部变量区别及用法分析
2018/09/03 Python
python读取目录下最新的文件夹方法
2018/12/24 Python
Python 实现向word(docx)中输出
2020/02/13 Python
CSS3 实用技巧:实现黑白图像效果示例代码
2013/07/11 HTML / CSS
幼师自荐信
2013/10/26 职场文书
应聘医药销售自荐书范文
2014/02/08 职场文书
社区安全生产月活动总结
2014/07/05 职场文书
升学宴演讲稿
2014/09/01 职场文书
工作经历证明范本
2015/06/15 职场文书
关于python类SortedList详解
2021/09/04 Python