Vue3 & app.use 与 install 函数的作用

1. app.use

在 vue3 中，默认初始化 vue 的方式是这样的

// src/main.js
import { createApp } from 'vue'
import App from '@/App.vue'
const app = createApp(App)
app.mount('#app')
export default app
1
2
3
4
5
6

如果我们需要引入 vue-router 则需要修改成比如这样

// src/main.js
import { createApp } from 'vue'
...
++++++++
import Home from '@/pages/Home.vue'
import {
  createRouter,
  createWebHistory
} from "vue-router"

const routes = [
  { path: '/home', component: Home },
]
const router = createRouter({
  history: createWebHistory('/'),
  routes
})
// 最后通过 app.use 方法引入 Router
app.use(router)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

类似的，其它插件如 i18n、vuex、vant 等都要借助 app.use 引入，
官方也解释了 app.use 就是用来引入插件，这里不在赘述。

2. install

在介绍 install 方法前，我们需要知道有这么一个方法 app.use(plugin, options)
其中 plugin 表示要传递的插件对象， options 参数是可选的，表示选项配置，
install 方法的定义就插件对象里面，install 方法会在引入插件时自动被 vue 调用，
并传参 vue 实例和 options ，具体代码如下：

// src/plugins/my-plugin.js
const myPlugin = {
	install(app, options) {
		// { name: 'Jack' }
		console.log(options);

		// 有了 app，我们注入一个全局组件
		app.component('my-button', import('@/components/my-button.vue'))
		// 也可以声明一个全局属性/函数
		app.config.globalProperties.$Tools = () => console.log('Hello,world')
	}
}
// src/main.js
app.use(myPlugin, { name: 'Jack' })
1
2
3
4
5
6
7
8
9
10
11
12
13
14

以上代码的作用在 vue 官方都有解释，但它还隐藏了与 vue-cli 构建有关的一个很有用的功能，
install 方法除了在插件对象内定义外，组件也可以自定义 install 方法，是的，组件本身也是一个对象，
因此组件被引入时也会自动触发 install，代码如下

// src/components/my-buttonn.js
import MyButton from '@/components/my-button.vue'
MyButton.install = (app) => {
	app.component('MyButton', MyButton)
}
1
2
3
4
5

上面在 my-button.js 中引入 my-butgton.vue 组件，并新增了 install 方法，里面通过 vue 实例加载了这个 my-button 组件，这有什么用呢？我们可以先看看 vue-cli 构建
里面解释了在打包 vue 时，有个选项 --target lib 命令，此命令可以将文件打包成一个可作为依赖导入的 js 库，
我们可以将这个库推送到 npm 中，然后通过 npm install [name] 的方式安装下来，接着在项目中引入这个依赖，就可以像往常那样使用组件了，伪代码如下：

// 例如：npm install cookcyq/MyButton

// 在代码中引入
// demo.vue
<template>
	<div class="main">
		<MyButton/>
	</div>
</template>
<script>
import MyButton from '@/cookcyq/Mybutton';
export default {
  components: {
	MyButton,
  }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

当依赖引入时，便会触发 install 方法，实现组件自引，一个库不止一个组件，你可以在 my-button.js 引入额外的组件，
构建属于自己的组件库，这样既可以单独维护，也可以减少主体项目的代码量。

对库感兴趣的同学可以往下读 Vue3 & 详解 vue-cli 使用 --target lib 打包的方式

完！