持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第4天，点击查看活动详情
今天我们来介绍一下Vue中注册组件的几种方式，总有一款是你喜欢的！
Vue.use()注册组件插件
这里将全局组件当作插件了
Vue.use() 是用来使用插件的，那么传入的 Router 和 Vuex 就是这里指的插件，而这个插件本质上又是一个 install 方法。至于 install 方法内部实现了什么逻辑就由插件自身的业务决定了
组件注册☞局部注册
//导入组件
import Hamburger from '@/components/Hamburger'
export default {
components: {
// 注册组件
'Hamburger':Hamburger ///可简写Hamburger
}
}
组件注册☞全局注册
//导入组件
import Hamburger from '@/components/Hamburger'
Vue.component('组件名',组件对象) //注册组件
组件注册☞Vue.use()依次全局注册
（以插件的形式注册，也就是将组件变成插件）
install就是为了使用vue.use()，将组件当作插件使用
import PageTools from './PageTools'
import UploadExcel from './UploadExcel'
export default {
// 插件的初始化, 插件给你提供的全局的功能, 都可以在这里配置
install(Vue) {
// 进行组件的全局注册
Vue.component('PageTools', PageTools) // 注册工具栏组件
Vue.component('UploadExcel', UploadExcel) // 注册导入excel组件
}
}
1、components/index.js里写
2、在main.js里写
组件注册☞Vue.use()批量全局注册
（以插件的形式注册，也就是将组件变成插件）
install就是为了使用vue.use()，将组件当作插件使用
所有组件批量注册：使用组件时，无需导入注册，可标签直接使用
注意：但是每个组件必须写name
批量注册使用 require.context（）方法
components/index.js里写
// 方法二：批量注册全局组件 webpack提供的
export default {
install(Vue) {
// require.context('文件路径', '是否深层次查找', '正则')
const requireComponent = require.context('./', true, /.vue$/) // 全局注册当前文件夹下.vue文件
// requireComponent.keys() 获取到的是数组，所有组件路径
requireComponent.keys().forEach(item => {
// 获取每一个组件对象
const moduleObj = requireComponent(item).default
// 全局注册
Vue.component(moduleObj.name, moduleObj)
})
}
}
在main.js里写:
