vue3 app.use()的作用小结

一句话先记住：
app.use(plugin) 就是给 Vue3 “施工队” 统一安装「外 挂」或「公共设备」的入口，一旦装完，所有组件都能直接享用，而不需要每个房间（组件）再去单独接电线、通水管。

一、类比理解

• Vue3 施工队（createApp() 返回的实例）
• plugin（外 挂）可以是一把“电动螺丝刀”、一套“中央空调”、或者一块“共享黑板”。
• app.use(plugin) 相当于队长说：“大家停一下，先把这套设备装上，以后谁想用直接用。”

二、官方定义

app.use(plugin, options) 会调用插件的 install(app, options) 方法，并保证同一个插件只会被安装一次。

三、最常见的 3 类外 挂

1. 全局功能增强（例：Router、Pinia、i18n）

   import { createRouter } from 'vue-router'
   const router = createRouter(...)
   app.use(router)               // 所有组件都能 this.$router / useRouter()
   

2. 全局自定义组件/指令（例：Element-Plus、自定义 loading 指令）

   import ElementPlus from 'element-plus'
   app.use(ElementPlus)          // 全局可用 <el-button> 等
   

3. 工具/调试类（例：devtools、mock、日志）

   import { createPinia } from 'pinia'
   app.use(createPinia())        // 状态管理仓库一次性装好
   

四、自己写一个最小插件

// my-logger.js
export default {
  install(app, options = {}) {
    // 1. 添加全局属性
    app.config.globalProperties.$log = (msg) => {
      console.log(`[${options.tag || 'APP'}]`, msg)
    }

    // 2. 添加全局自定义指令
    app.directive('focus', {
      mounted(el) { el.focus() }
    })

    // 3. 添加全局组件（可选）
    // app.component('MyButton', {...})
  }
}

使用：

import { createApp } from 'vue'
import App from './App.vue'
import MyLogger from './my-logger.js'

const app = createApp(App)
app.use(MyLogger, { tag: '别墅' })   // 安装插件并传参
app.mount('#app')

以后在任何组件里都能：

<script setup>
import { getCurrentInstance } from 'vue'
const { proxy } = getCurrentInstance()
proxy.$log('Hello from any room!')
</script>

<template>
  <input v-focus />
</template>

五、一句话总结

app.use(plugin) 是 Vue3 提供的一次性「全局安装接口」：
插件想在全局挂属性、注组件、注册指令、改配置，都写在自己的 install 里；
用户只需一行 app.use(...)，整个应用就能共享这些能力。

到此这篇关于vue3 app.use()的作用的文章就介绍到这了,更多相关vue3 app.use()内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！