Vue 使用 prerender-spa-plugin 添加loading
主要配置代码:
new PrerenderSPAPlugin({
staticDir: path.join(__dirname, 'dist'),
routes: ['/', '/introduction', '/application', '/download'],
postProcess: function (context) {
context.html = context.html.replace(
/<\/head>/i,
`<script>
document.addEventListener("DOMContentLoaded", function (event) {
document.getElementById('landing').style.display = 'none';
})
</script>
</head>`
)
return context
}
}),
html
<div id="landing">
<img id="landing-img" src="/loading-bars.svg" alt="landing">
</div>
css
#landing {
position: fixed;
left:;
top:;
right:;
bottom:;
background: #fff;
z-index:;
}
#landing-img {
position: absolute;
width: 60px;
left: 50%;
top: 40%;
margin-left: -20px;
}
main.js
new Vue({
router,
store,
render: h => h(App),
mounted () {
if (process.env.NODE_ENV !== 'production') {
document.getElementById('landing').style.display = 'none'
}
}
}).$mount('#app')
Vue 使用 prerender-spa-plugin 添加loading的更多相关文章
- Vue通过状态为页面切换添加loading、为ajax加载添加loading
以下方法需要引入vuex,另使用了vux的UI框架,ajax添加loading还引入了axios. 一.为页面切换添加loading. loading.js: import Vue from 'vue ...
- 基于 Webpack & Vue & Vue-Router 的 SPA 初体验
基于 Webpack & Vue & Vue-Router 的 SPA 初体验 本文来自于腾讯bugly开发者社区,非经作者同意,请勿转载,原文地址:http://dev.qq.com ...
- 使用node+vue.js实现SPA应用,nodevue.jsspa应用
使用node+vue.js实现SPA应用,nodevue.jsspa应用 http://www.bkjia.com/Javascript/1097617.html https://github.com ...
- WPF 客户端浏览器 添加Loading加载进度
在windows开发界面时,使用浏览器来请求和显示网页内容,是比较常见的. 但是在请求网页内容时,因网速或者前端功能复杂加载较慢,亦或者加载时遇到各种问题,如空白/黑屏/加载不完整/证书问题等. 因此 ...
- vue 点击当前元素添加class 去掉兄弟的class 获取当前点击元素的文字
点击当前标签给其添加class,兄弟标签class删除 然后获取当前点击元素的文字 演示地址: https://xibushijie.github.io/static/addClass.html &l ...
- vue 点击当前元素添加class 去掉兄弟的class
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http ...
- vue不同序号的元素添加不同的样式
vue不同序号的元素添加不同的样式 一.总结 一句话总结: 在vue中设计一个样式的数据数组来遍历即可 <script> new Vue({ el:'#review_exam_part', ...
- vue实现购物清单列表添加删除
vue实现购物清单列表添加删除 一.总结 一句话总结: 基础的v-model操作,以及数组的添加(push)删除(splice)操作 1.checkbox可以绑定数组,也可以直接绑定值? 绑定数组就是 ...
- 转:extjs 添加loading状态的三种解决办法:
extjs 添加loading状态的三种解决办法: 方法一: //materialGrid 指需要显示loading状态的控件id var o=Ext.getCmp('materialGrid'); ...
- vue 实现todolist,包含添加,删除,统计,清空,隐藏功能
vue 实现todolist,包含添加,删除,统计,清空,隐藏功能 添加:生成列表结构(v-for+数组).获取用户输入(v-model).通过回车新增数据(v-on+.enter) 删除:点击删除指 ...
随机推荐
- 链家鸟哥:从留级打架问题学生到PHP大神,他的人生驱动力竟然是?
链家鸟哥:从留级打架问题学生到PHP大神,他的人生驱动力竟然是?| 二叉树短视频 http://mp.weixin.qq.com/s/D4l_zOpKDakptCM__4hLrQ 从问题劝退学生到高考 ...
- 数据库——SQL数据连接查询
连接查询 查询结果或条件涉及多个表的查询称为连接查询SQL中连接查询的主要类型 广义笛卡尔积 等值连接(含自然连接) 自身连接查询 外连接查询 一.广义笛卡尔积 不带连 ...
- 第三次Sprint计划
本次工作目标: 完成困难模式的算法.对已知的bug进行完善.一定程度上的美化界面(没有艺术细胞,估计也美化不到多少),由于临近期末,事情比较多,不知道能不能进行数据库操作这一步骤,因为android好 ...
- Vue 和 angular
vue适合移动端的项目,而angular更适合运用于Pc端的项目.
- 清华大学OS操作系统实验lab1练习知识点汇总
lab1知识点汇总 还是有很多问题,但是我觉得我需要在查看更多资料后回来再理解,学这个也学了一周了,看了大量的资料...还是它们自己的80386手册和lab的指导手册觉得最准确,现在我就把这部分知识做 ...
- C语言入门:02.第一个C语言程序
一.开发工具的选择(1)可以用来写代码的工具:记事本.UltraEdit.Vim.Xcode等(2)选择Xcode的原因:苹果官方提供的开发利器.简化开发过程.有高亮显示功能 (3)使用Xcode新建 ...
- [专贴]Xshell 以及 shell 的快捷键
Ctrl + a 切换到命令行开始Ctrl + e 切换到命令行末尾Ctrl + l 清除屏幕内容Ctrl + u 清除光标之前的内容Ctrl + k 清除光标之后的内容Ctrl + h 类似于退格键 ...
- PSP(3.16——3.22)以及周记录
3.17 13:30 14:45 15 60 讨论班 A Y min 14:50 17:05 5 130 得到设备 Cordova 蓝牙连接 A Y min 23:15 23:45 5 25 英语百词 ...
- CF1073E Segment Sum
数位DP,求[L,R]区间内所有"数字内包含的不同数码不超过k个的数字"之和.在状态上加一维状态压缩表示含有的数码集合.一开始读错题以为是求数字的个数.读对题之后调了一会儿. #i ...
- Java重写toString和泛型的使用
一.在一个类中重写toString方法 public class Person { private String name; private int age; public Person() { } ...