Vue3 app.use 与 install 函数的作用

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)
unt('#app')
export default app

如果我们需要引入 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)

类似的，其它插件如 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，我们注入一个全局组件appponent('my-button', import('@/components/my-button.vue'))// 也可以声明一个全局属性/函数fig.globalProperties.$Tools = () => console.log('Hello,world')}
}
// src/main.js
app.use(myPlugin, { name: 'Jack' })

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

// src/components/my-buttonn.js
import MyButton from '@/components/my-button.vue'
MyButton.install = (app) => {appponent('MyButton', MyButton)
}

上面在 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>

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

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

完！