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) 删除:点击删除指 ...
随机推荐
- 使用VS2013进行C#程序的单元测试
没有按照预期的那样做出成功的单元测试,磕磕绊绊参照了下面两篇博客大致做出来了,所以很有必要记录一下过程. http://www.cnblogs.com/duasonir/p/5299732.html( ...
- VS2013快速安装教程
1.下载vs2013安装镜像.VS2013_RTM_ULT_CHS.iso链接: http://pan.baidu.com/s/1mguOdiK密码: rllz 建议使用百度网盘客户端下载,虽然被人 ...
- 『编程题全队』Alpha 阶段冲刺博客Day5
1.每日站立式会议 1.会议照片 2.昨天已完成的工作统计 孙志威: 1.完成SlotWidget的设计和功能 2.修改了TitleBar上的功能按钮的CSS样式表 孙慧君: 1.登录框的UI设计 2 ...
- java词频统计——web版支持
需求概要: 1.把程序迁移到web平台,通过用户上传TXT的方式接收文件. 2.用户直接输入要统计的文本,服务器返回结果 3.在页面上给出链接 (如果有封皮.作者.字数.页数等信息更佳)或表格,展示经 ...
- Docker(五)-Dcoker容器
简单的说,容器是独立运行的一个或一组应用,以及它们的运行态环境. 如果把镜像看成面向对象中的 类 的话,那么容器就是 类 的实例化 对象. 容器 启动容器 启动容器有两种方式,一种是基于镜像新建一个容 ...
- CentOS修改主机名字
目录 查看hostnmae 修改hostname 远程别名/etc/hosts 查看hostnmae [root@centos ~]$ hostname centos 修改hostname [root ...
- 在手机上点击input框时会放大页面
加上 <meta name="viewport" content="initial-scale=1.0, minimum-scale=1.0, maximum-s ...
- 用send_keys输入文本的方法
我们使用app时,输入文字都是调用软键盘.在自动化测试中当然也可以调用软键盘,但是由于输入法设计上的差异,有时候不能达到很好的效果. 例如,搜狗拼音输入法: 选择4-咖啡,然而多打几次,输入法就把“咖 ...
- 04.基于IDEA+Spring+Maven搭建测试项目--application-context.xml配置
<?xml version="1.0" encoding="UTF-8"?> <beans xmlns="http://www.sp ...
- 题解 P5239 【回忆京都】
你们这些写题解的,就不能把话说清楚嘛!(吐槽1) 你们这些出题的,就不能多出点东方嘛!(吐槽2) 你们这些做题的,就不来写一篇详细一点的题解嘛!(吐槽3) 以上均是个人吐槽,纯属吐槽,不带任何针对性和 ...