Vue.use()实现原理-沉迷于代码世界无法自拔

一般为了使main.js中代码更加精简，会把全局组件封装到公共js中，在main.js中使用起来就会更加方便 1.创建组件和公共js

2.index.js引入，注册，导出，这里提供对象的方式，和函数的方式，两种方式都可以实现

import HelloWorld from "@/components/HelloWorld"
import World from "@/components/World"

//对象写法
export default {
  
  install(Vue) {
    Vue.component('HelloWorld',HelloWorld)
  }
}
//函数写法

function Plugin(Vue) {
  Vue.component('World',World)
}

export{Plugin}

3.main.js中用Vue.use()使用

import Vue from 'vue'
import App from './App.vue'

import Hello from "@/components/index.js"
import {Plugin} from '@/components/index.js'
Vue.use(Hello)
Vue.use(Plugin)


Vue.config.productionTip = false

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