这个组件是为了避免白屏
先创建一个vue页面
<template>
<div class="hello" v-show="show">
<!--引一个loading图片-->
<img src="../assets/loading.jpg"/>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
data () {
return {
msg: 'Welcome to Your Vue.js App',
show:true
}
},
created(){
let that=this; //因为接受 show的时候改变了this指向 所以必须定义下this
setTimeout(function(){
that.show=false
},3000) // 使它三秒后消失
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.hello
{
width: 100vw;
height: 100vh;
position: fixed;
top: 0;
left: 0;
display: flex;
justify-content: center;
align-items: center;
background: white;
}
.hello img
{
width: 80%;
height: auto;
}
</style>
在另一个页面引入
<template>
<div class="hello">
//引入
<loding ></loding>
{{msg}}
</div>
</template>
<script>
//引入
import Loding from '@/components/loding'
export default {
name: 'HelloWorld',
data () {
return {
msg: 'Welcome to Your Vue.js App',
}
},
created(){
},
//引入
components:{
Loding
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
就ok了 这样哪个页面需要 就引入到哪个页面