vue的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) app.mount(#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

 
 

 
 

 
 

 
 

 
 

 
 

 
 

 
 

 
 
，我们注入一个全局组件 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.js import 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; export default { components: { MyButton, } } </script>

当依赖引入时                            ，便会触发 install 方法
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
，实现组件自引


























，一个库不止一个组件                   ，你可以在 my-button.js 引入额外的组件
  
 
  
 
  
 
  
 
  
 
  
 
  
 
  
 
  
 
，

构建属于自己的组件库

















，这样既可以单独维护 
  
  
  
  
  
  
  
  
  ，也可以减少主体项目的代码量
  
 
  
 
  
 
  
 
  
 
  
 
  
 
  
 
  
 
。

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

完！