当前位置：首页 > news >正文

vue3 app.use()的作用

news 2025/8/16 8:05:51

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

一、类比理解

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

二、官方定义

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

三、最常见的 3 类外挂

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

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

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

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

工具/调试类（例：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>