vue.use()原理分析

三行代码引出的思考

对于vue这个框架很熟悉的同学应该对这三行代码，一点都不陌生吧。我们新建一个项目之后，体贴的vue-cli已经完成一些系列的手脚架搭建，而搭建的结果我们可以在main.js上面看到相关的组件引用

import { createApp } from 'vue'
import App from './App.vue'

createApp(App).mount('#app')

看到这些我们似乎都已经习以为常，尤大大不会平白无故写无用代码，这段简简单单的代码其实蕴含挺多内容的，我们不妨一层层剖析。是否观察到这样一个现象：在引入Vue-Router、ElementUI的时候需要Vue.use()？而引入axios的时候，不需要Vue.use()?

沉思

基于这个现象便在思考这两种引用方式的到底对我们项目工程带来什么样的不同。因为类似vue-router，ElementUI这些都是vue的一个组件，而Axios是一个基于promise的HTTP库，可以用在浏览器和node.js 中，这两种是有本质上的不同，因此前者依赖vue才能执行，也就是需要use才能进行初始化，而后者脱离了vue也是照样可以运行的，因此不用use。

既然use是用来加载组件的，那么总的有入口函数吧？不然怎么将这些组件进行加载？我们不妨窥探一下这些组件是怎么来，不妨品读一下element源码，我们在他们的打包文件中的第23行我们可以看到，打包程序会去加载index.ts这个文件

const entry = path.resolve(__dirname, '../packages/element-plus/index.ts')

那我们接着去index.ts这个文件中寻找真相，这个文件的结构其实也不是很复杂，主要是三部分，第一部分是从第1-226行的import操作，之后是第228行-244行的关键逻辑，最后是从第246-349行的export，因此我们最关键的就是分析其中的第二部分

const install = (app: App, opt: InstallOptions): void => {
  const option = Object.assign(defaultInstallOpt, opt)
  locale(option.locale)
  if (option.i18n) {
    i18n(option.i18n)
  }
  app.config.globalProperties.$ELEMENT = option
  setConfig(option)

  components.forEach(component => {
    app.component(component.name, component)
  })

  plugins.forEach(plugin => {
    app.use(plugin)
  })
}

这里看到开发者们实现了一个install方法，通过这个方法实现了该组件的安装，注意到方法中引用了app这个参数，其实就是vue的实例，将这些组件的注册到该实例中，从而响应use的方法

总结

其实到了这里就可以知道，对于use方法其实是对install这个方法的响应，通过调用不同组件的install方法来进行加载，而install方法中会将读取对应的components源码，完成相关的代码执行。可以说在组件视角下，install方法等同于main方法。

进一步衍生

作为use使用的入口函数已经被我们揪出来了，然而好像我们还没有意识到每次use之前还需要import这个操作，而import之前还需要我们npm install ***这个又是怎么来的呢？这个答案我们照样可以在element源码中窥探一二，生成这个文件的过程其实就是一个“打包”的操作，而打包的文件都是放在build这个目录下，而这个目录跟“包”有关的其实也就是webpack.config.js这个文件，这个文件里的第23行指明了打包之后加载的入口文件

const entry = path.resolve(__dirname, '../packages/element-plus/index.ts')

在第40-47行则是说明这个打包文件构建的格式、构建之后输出的目录位置和打包之后的文件名，通过这些属性的配置，完成一次打包操作，再之后就根据需要来了，比如是发布npm包还是离线安装，这个看各自的需要啦