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) 删除:点击删除指 ...
随机推荐
- c# winform调用摄像头识别二维码
首先我们需要引用两个第三方组件:AForge和zxing. Aforge是摄像头操作组件,zxing是二维码识别组件.都是开源项目.避免重复造轮子. 其实一些操作代码我也是参照别人的,若侵犯您的版权, ...
- linux读书笔记(5章)
linux读书笔记(5章) 标签(空格分隔): 20135328陈都 第五章 系统调用 5.1 与内核通信 系统调用 让应用程序受限的访问硬件设备 提供创建新进程并与已有进程通信的机制 提供申请操作系 ...
- Alpha版本事后诸葛亮
目录 设想和目标 计划 资源 变更管理 设计/实现 测试/发布 团队的角色,管理,合作 总结: 本小组和其他组的评分 分工和贡献分 全组讨论的照片 问题 第一组提问回答:爸爸饿了队 第二组提问回答:拖 ...
- d3 数学方法(伪随机数生成器 )
一.正态(高斯)分布(normal (Gaussian) distribution)的随机数 /* var nomarlRandmo = d3.random.normal(); console.log ...
- PHP 验证IP的合法性
php验证IP的合法性! function get_ip(){ //判断服务器是否允许$_SERVER if(isset($_SERVER)){ if(isset($_SERVER[HTTP_X_FO ...
- Android Handler 异步调用修改界面与主线程
在Android编程的过程中,如果在Activity中某个操作会运行比较长的时间,比如:下载文件.这个时候如果在主线程中直接下载文件,会造成Activity卡死的现象:而且如果时间超过5秒,会有ANR ...
- NESTED最终与外部事务合并在一起提交
NESTED最终与外部事务合并在一起提交
- boost.asio学习-----reslover 域名解析
将域名解析为ip地址并输出: #include "stdafx.h" #include "boost/asio.hpp" #include <boost/ ...
- Pathwalks CodeForces - 960F(主席树 || 树状数组)
题意: 求树上最长上升路径 解析: 树状数组版: 998ms edge[u][w] 代表以u为一条路的终点的小于w的最长路径的路的条数 · 那么edge[v][w] = max(edge[u][w-1 ...
- 解题:BZOJ 2989 数列
题面 学习二进制分组 题目本身可以看成二维平面上的问题,转成切比雪夫距离后就是矩形和了 二进制分组是将每个修改添加到末尾,然后从后往前二进制下进位合并,这样最多同时有$\log n$组,每个修改只会被 ...