1.在Index.html里面加入loading的元素，让loading元素显示，让app元素隐藏
<!DOCTYPE html>

<html>

  <head>

    <meta charset="utf-8">

    <title>Demo</title>

    <link rel="icon" href="/favicon.ico" mce_href="/favicon.ico" type="image/x-icon">

    <link rel="shortcut icon" href="/favicon.ico" mce_href="/favicon.ico" type="image/x-icon">

    <style media="screen" type="text/css">

       #appLoading { width: 100%; height: 100%; }

       #appLoading span {

            position: absolute;

            display: block;

            font-size: 50px;

            line-height: 50px;

            top: 50%;

            left: 50%;

            width: 200px;

            height: 100px;

            -webkit-transform: translateY(-50%)  translateX(-50%);

            transform: translateY(-50%)  translateX(-50%);

        }

    </style>

  </head>

  <body>

    <div id="appLoading">

       <span>Loading...</span>

    </div>

    <div id="app" style="display: none">

       <app></app>

    </div>

    <!-- built files will be auto injected -->

  </body>

</html>


2.在App.vue中加入： 加载完成之后，让loading隐藏，让app元素显示




 mounted(){

        document.getElementById('app').style.display = 'block';

        document.getElementById('appLoading').style.display = 'none';

 }




3. 原理


在文档开始加载的时候显示loading


在js加载完毕后，显示app


												


											
vue项目未加载完成前显示loading...的更多相关文章
	

    
								
  1. 在页面未加载完之前显示loading动画
		
    在页面未加载完之前显示loading动画 这里有很多比这篇博客还优秀的loading动画源码 我还参考这篇博客 loading动画代码demo 我的demo预览 <!DOCTYPE html&g ...
    
		
    2. 
						
  2. javascript图片加载完成前显示loading图片
		
    <html> <title>图片预加载</title> <body> <script> //判断浏览器 var Browser=new Ob ...
    
		
    3. 
						
  3. vue 首页背景图片加载完成前增加 loading 效果 -- 使用 new Image() 实现
		
    1. 创建 loading 公用组件 <template> <div class="load-container"> <div class=" ...
    
		
    4. 
						
  4. css3实现loading效果--当页面加载过程中显示Loading的进度条，全部加载完成之后进度条消失
		
    一个页面等图片资源全部加载完成,会需要很长时间,用户体验会很差,所以我们需要loading来掩盖这个漫长的过程! emmm,定时器?写个定时器还要清除,万一造成内存泄露?定时器之间还会互相影响,呼呼呼 ...
    
		
    5. 
						
  5. 在Vue项目中加载krpano全景图
		
    在Vue-cli项目中做krpano全景图编辑器的时候,由于js插件的路径是动态的,做的过程中遇到了加载不到资源的难题,在网上搜索了好久也没找到合适的办法,最后想到了可能是JS加载的问题,于是解决了问 ...
    
		
    6. 
						
  6. vue项目首次加载过慢
		
    vue项目优化 浅谈 Vue 项目优化 关于vue在app首次加载缓慢的解决办法 nginx开启缓存 在http部分加入 #要想开启nginx的缓存功能,需要添加此处的两行内容! #设置Web缓存区名 ...
    
		
    7. 
						
  7. vue-router中，require代替import解决vue项目首页加载时间过久的问题
		
    vue的路由配置文件(routers.js),一般使用import引入的写法,当项目打包时路由里的所有component都会打包在一个js中,在项目刚进入首页的时候,就会加载所有的组件,所以导致首页加 ...
    
		
    8. 
						
  8. vue-router路由懒加载（解决vue项目首次加载慢）
		
    懒加载:----------------------------------------------------? 也叫延迟加载,即在需要的时候进行加载,随用随载. 为什么需要懒加载? 像vue这种单 ...
    
		
    9. 
						
  9. 页面数据加载完成时,显示loading页面.数据加载完,loading隐藏.
		
    一,引入三个文件 jQuery版本使用 jQuery v1.7.1 jquery-easyui文件中,引入easyui-lang-zh_CN.js的js 做数据加载时使用jquery.blockui. ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. WPF常用样式总结
			
    常用控件样式: <ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation ...
    
			
    2. 
						
  2. grid布局学习二之子元素（项目）
			
    /* grid-column-start属性:左边框所在的垂直网格线 grid-column-end属性:右边框所在的垂直网格线 grid-row-start属性:上边框所在的水平网格线 grid-r ...
    
			
    3. 
						
  3. 面试时遇到的题目。正则，replace()
			
    function Fn(str){ this.str = str; } Fn.prototype.format = function(){ var arg = arguments; var dd =  ...
    
			
    4. 
						
  4. mybatis 控制台打印sql语句
			
    其实很简单,打印SQL只需要加一个setting就可以了.亲测可用. mybatis-config.xml: <settings>        <setting name=&quo ...
    
			
    5. 
						
  5. JavaScript操作和使用Cookie
			
    Cookie概述 Cookie是由服务器端生成并储存在浏览器客户端上的数据. 在javaweb开发中Cookie被当做java对象在web服务器端创建,并由web服务器发送给特定浏览器客户端,并且we ...
    
			
    6. 
						
  6. ie8兼容视频播放的探索（探索过程稍微有点长，时间紧迫和耐心稍微差一点点的小伙伴直接往下拉）
			
    需求: 前几天接到一个需求,需要在网页中嵌入视频,并且要兼容ie8:然后我就开始了如下的探索...... 探索过程: 我先思考有什么方法可以在网页中嵌入视频,然后找到2种常用的方法——video标签和 ...
    
			
    7. 
						
  7. Linux学习笔记《六》
			
    
			
    8. 
						
  8. git无法识别新增的文件
			
    问题是这样的我新增几个文件夹打算提交到git库,但输入指令:“git status” 发现新增的文件夹并没有出现在准备提交区里 不知道什么原因造成的后来我百度找到方法 使用指令:“git add -f ...
    
			
    9. 
						
  9. gitlab服务部署及使用
			
    一.什么是gitlib Gitlab 是一个基于Git实现的在线代码仓库托管软件,你可以用Gitlab自己搭建一个类似于Github一样的系统平台,一般搭建gitlab私服就是用在公司的内部 Gitl ...
    
			
    10. 
						
  10. Xamarin.Android 无法检索到 Resource 问题
			
    错误提示:当前上下文中不存在名称"Resource" 解决方法: 1.看是否有其他错误,如果有其他错误优先解决.(其他错误导致无法感知到Resource) 2.重新生成解决方案.( ...
    
			
    11.