Vue中自定义组件全局注册安装

有没有考虑过一个问题，在Vue中为什么我们安装了ElementUI或者Antd之后，只需要在main.js中引入ElementUI并use(ElementUI)，就可以在项目的任何组件中直接使用Element的任何组件？
那我们自己定义的组件可不可以实现这种操作呢？而不是在组件中引入一个个的组件去使用。


还像上面这样使用？在PassWordReset组件中引入了TopTip，在ForgetPwd中也引入了TopTip。那就不够优雅了！
看我下面的写法，创建一个js文件，名字你可自定义，我这里写了cgi.js,
并在里面写入内容：

//导入自定义组件
import TopTip from "../components/TopTip";

//写进数组，方面接下来的遍历
const componentArr = [TopTip]

const cgi = {
//install为Vue中的默认写法，我们在main.js中使用cgi,项目会自动执行install方法
//此方法还会接收一个参数 Vue
    install(Vue) {
    //遍历自定义组件 全局使用
        componentArr.forEach(item => {
            Vue.component(item.name, item)
        })
    }
}

export default cgi

在main.js中，正常引入cgi并使用即可。

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import cgi from "./utils/cgi";

Vue.config.productionTip = false

Vue.use(cgi)

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

完成以上操作后，我们自定义的组件TopTip可以直接在任何组件中使用，而不需要单独引入！