1.首先搭建好vue-cli脚手架
自动生成后删除不需要的代码，下面是我的文件路径
image.png
2.这里是components / loading / Loding.vue文件里面内容
<template>
<div class="loading_box">{{msg}}</div>
</template>
<script>
export default{
data(){
return{
msg:'Loading…'
}
}
}
</script>
<style scoped>
.loading_box{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
font-size: 5rem;
color: royalblue;
}
</style>
3.这里是components / loading / index.js文件里面内容
import LoadingComponent from './Loading.vue';
const Loading={
install:function (Vue){
Vue.component('Loading',LoadingComponent)
}
}
export default Loading
index.js导出组件，里面需要install
4.这里是main.js文件里面内容
import Vue from 'vue';
import App from './App.vue';
import Loading from './components/loading'; //默认情况下找的是index文件
Vue.use(Loading); //必须有install
new Vue({
el: '#app',
render: h => h(App)
})
5.这个时候在App.vue里面写上组件名称
<template>
<div id="app">
<Loading></Loading>
</div>
</template>
<script>
export default {
name: 'app',
data () {
return {
}
}
}
</script>
这里面只是简单加了一个 <Loading></Loading> 组件
6.这个时候npm run dev 跑起来就能看见了 效果了
image.png
