自定义一个全局Loading组件,并使用:
总结目录:
|-components
|-loading
|-index.js 导出组件,并且install
|-loading.vue 定义Loading组件
1.components/loading/index.js
import LoadingComponent from "./Loading.vue"
const Loading = {install: function(Vue){Vue.component("Loading", LoadingComponent)}
}
export default Loading
2.components/loading/Loading.vue
<template><div class="loading-box">loading...</div>
</template>
3.main.js
import Vue from 'vue'
import App from './App'
import Loading from "./components/loading/index.js"Vue.use(Loading)new Vue({el: '#app',router,components: { App },template: '<App/>'
})
4.App.vue
<template><div id="app"><Loading></Loading></div>
</template>