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

1. app.use

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

// src/main.jsimport{ createApp }from'vue'import App from'@/App.vue'const app =createApp(App)
app.mount('#app')exportdefault app

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

// src/main.jsimport{ 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.jsconst 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'})

以上代码的作用在 vue 官方都有解释，但它还隐藏了与 vue-cli 构建有关的一个很有用的功能，

install

方法除了在插件对象内定义外，

组件

也可以自定义

install

方法，是的，组件本身也是一个对象，
因此组件被引入时也会自动触发

install

，代码如下

// src/components/my-buttonn.jsimport MyButton from'@/components/my-button.vue'
MyButton.install=(app)=>{
    app.component('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';exportdefault{components:{
    MyButton,}}</script>

当依赖引入时，便会触发

install

方法，实现组件自引，一个库不止一个组件，你可以在

my-button.js

引入额外的组件，
构建属于自己的组件库，这样既可以单独维护，也可以减少主体项目的代码量。

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

完！