Vue3全局API如何使用 app.use 挂载第三方插件与路由库

app.use 是 Vue3 挂载插件的唯一标准方式，必须在 app.mount() 前调用，接收插件函数或含 install 方法的对象及可选配置，支持链式调用与自动去重。

Vue3 中的 app.use 是挂载插件的唯一标准方式，所有最新和第三方库（比如 Vue Router、Pinia、Element Plus）都必须通过它接入应用。它不是“可选操作”，而是功能注入的前提——没调用 app.use()，插件根本不会生效。

app.use 的基本用法和关键规则

它接收两个参数：插件本身（函数或含 install 方法的对象），以及可选的配置对象。必须在 app.mount() 之前执行，否则插件无法完成初始化。

1. 顺序不能错：先 app.use(插件)，再 app.mount()
2. 支持链式调用：app.use(router).use(store).use(uiLib)
3. 重复调用同一插件会被自动忽略（内部用 Set 去重）
4. 插件必须导出为函数，或具有 install(app, options) 方法的对象

挂载 Vue Router 的标准流程

以 Vue Router 4 为例，安装后需在 main.js 或 main.ts 中完成注册：

1. 导入已创建好的路由实例（通常来自 src/router/index.js）
2. 直接传入 app.use(router)，无需额外参数
3. 路由实例内部已封装好 install 方法，会自动注册全局组件（<router-link>、<router-view>）、指令和组合式 API（useRouter、useRoute）

示例代码：

import { createApp } from 'vue'import App from './App.vue'import router from './router'const app = createApp(App)app.use(router) // ✅ 关键一步app.mount('#app')

挂载状态管理库（如 Pinia）

Pinia 同样遵循插件规范，但需注意：它的 createPinia() 返回的是一个插件实例，不是普通对象。

1. 调用 createPinia() 得到 pinia 实例
2. 将该实例传给 app.use()，而不是直接 import 默认导出
3. 后续组件中才能使用 useStore 等组合式 API

示例：

import { createApp } from 'vue'import { createPinia } from 'pinia'import App from './App.vue'const app = createApp(App)const pinia = createPinia()app.use(pinia) // ✅ 不是 app.use(createPinia())app.mount('#app')

挂载 UI 库或自定义插件

像 Element Plus、Ant Design Vue 这类 UI 库，通常提供 app.use(ElMessage) 或 app.use(ElementPlus) 入口。部分库还支持按需引入 + 插件注册。

1. 确认文档是否要求调用 app.use()（多数现代 UI 库需要）
2. 有些插件需传入配置对象，例如：app.use(i18n, { locale: 'zh-CN' })
3. 自定义插件可统一管理权限、请求拦截、全局指令等，结构清晰且复用性强

小提示：如果插件没生效，优先检查三点——是否漏掉 app.use()、是否写在 mount() 之后、插件导出格式是否符合规范。