自定义一个全局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>