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) 删除:点击删除指 ...
随机推荐
- 关于java中指针的概念
今天寡人遇到一个问题,扫描非关系数据库中的图(由node和rel组成),将其转化成由寡人自定义的gnode和gedge组成的图. gnode类包含结点的id,label和包含此gnode的gedge的 ...
- vs2013的安装与使用 测试
vs2013软件我去年已经用过,可是当时只是鉴于对于c语言的编程,并没有觉得好用,况且好多的功能自并没有去深入研究,所以当时对于这个软件还是排斥的.安装的时候是别人帮我装的,所以并没有在安装的过程有问 ...
- SQLServer2008只能编辑前面200行数据
设置编辑所有行:操作步骤:打开数据库-〉工具-〉选项-〉sqlserver对象资源管理器-〉命令 把200改为0,即可编辑所有行了
- [转载] Activiti Tenant Id 字段释疑
TENANT_ID_ : 这个字段表示租户ID.可以应对多租户的设计. 转载自: http://www.cnblogs.com/yg_zhang/p/4201288.html http://www. ...
- 在delphi中我用DBGrid选择多条记录,如何一次把选择的多条记录删掉
procedure TForm1.btnDoSumClick(Sender: TObject);var i: Integer;begin if DBGrid1.SelectedRows.Count ...
- c#public、private、protected、internal、protected internal
public 公有访问.不受任何限制.private 私有访问.只限于本类成员访问,子类,实例都不能访问.protected 保护访问.只限于本类和子类访问,实例不能访问.internal 内部访问. ...
- VC++ 常见问题及其解决方法
1. 无法找到“XXX.exe”的调试信息,或者调试信息不匹配: 选择 配置属性->链接器->调试->生成调试信息 改为 是 选择 配置属性->C/C++ ->常规-&g ...
- c语言基础——基本数据类型
1.基本数据类型是什么?包括有哪些代表?除了基本数据类型还有什么其他类型形式? (1)基本数据类型--用于描述基本的数据 (数.日期等) (2)有整型.实型.字符型.枚举类型等等 ========== ...
- 【hdu1542】线段树求矩形面积并
分割线内容转载自http://hzwer.com/879.html ------------------------------------------------------------------ ...
- 【POJ2796】Feel Good 单调栈
题目大意:给定一个长度为 N 的序列,求任意区间 [ l , r ] 中最小的\(min\{v[i],i\in[l,r] \}*\Sigma_{i=l}^rv[i]\). 题解:这是一道具有标准单调栈 ...