vue-cli -- 自定義配置全局組件

一、全局配置

1、創建公共組件

在components文件夾load中新建loading.vue和loading.js兩個文件，vue文件用來寫公共組件，js用來導出這個組件

2、導出公共組件

在loading.js中，規定了使用這個組件的名字，以及使用方法

import Loading from './loading.vue'
const loading={
    install:function(Vue){
        // Vue.component()是用來注冊全局組件的
        Vue.component('loading',Loading)
    }  // loading'這就是后面可以使用的組件的名字，install是vue實例上默認的一個方法
}
export default loading

3、引入公共組件

// 在main.js中引入自定義配置的組件，並掛載到vue上
import Loading from './loading'
Vue.use(Loading)

4、調用公共組件

可以在項目中的任何地方使用自定義的組件了

<template>
    <div>
        <loading></loading>
    </div>
</template>

二、局部配置

1、寫好全局組件

在components中創建一個loading.vue的文件，里面寫好邏輯代碼

2、局部引入組件

這里就比上面簡單一點，我們在需要使用這個組件的vue文件中直接引入這個vue文件，然后在component中注冊一下，就可以使用了

// 引入組件
import Loading from '@/components/loading'

// 注冊組件，一定要注冊，不然沒有效果
components: {
    Loading
}

// 調用這個組件
<loading></loading>