全局注册组件

本文章介绍三种全局注册组件的方式，具体使用哪种，按照大家的项目具体情况决定

1.在 main.js 中注册

// 引入
import MyComponent from '@/compnents/myComponent'
// 注册为全局组件
Vue.component('MyComponent', MyComponent)

在组件中即可直接使用

缺点是如果需要注册的全局组件非常多时，则需要一个一个引入，并分别调用 Vue.component 方法，main.js 文件就会变得非常臃肿，不利于维护

2.使用插件的形式

在 components 文件夹下新建一个 index.js 文件，作为统一注册组件的入口文件

// @/components/index.js

// 引入
import MyComponentA from '@/compnents/myComponentA'
import MyComponentB from '@/compnents/myComponentB'
export default {
  // 全局注册组件
  install(Vue) {
	Vue.component('MyComponentA', MyComponentA)
	Vue.component('MyComponentB', MyComponentB)
  }
}

// main.js

import Vue from 'vue'
import Components from '@/components'
Vue.use(Components)

这种注册方法虽然避免了在 main.js 文件中一个一个引入，但本质还是每个组件都需要引入，并调用 Vue.component 方法，每个全局组件都需要去手动引入并注册，也比较麻烦

3.全局组件文件夹

定义一个全局组件文件夹，在文件夹中创建的组件会自动注册为全局组件

1.在components文件夹中，创建全局组件文件夹，并在文件夹中创建 index.js

@/components/globalCpns/index.js

2.入口文件 index.js

// @/components/globalCpns/index.js

import Vue from 'vue'
const req = require.context('./', true, /\/.vue$/)

req.keys().forEach((element, index) => {
  const anme = element.replace(/(\.\/)|(\.vue)/gi, '')
  Vue.compoennt(
	`${name.split('/')[name.split('/').length - 1]}`,
      req(element).default
  )
})

3.main.js引入

import '@/components/globalCpns/index.js'

如果需全局注册的组件较多时，推荐最后一种引入方式

只需优雅的一行引入代码