Vue3全局API怎么使用 app.use 挂载第三方插件与路由库-Vue.js-PHP中文网

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

vue3全局api怎么使用 app.use 挂载第三方插件与路由库

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

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

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

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

挂载 Vue Router 的标准流程

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

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

示例代码：

vue-component-analyzer

递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。

下载

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() 返回的是一个插件实例，不是普通对象。

调用 createPinia() 得到 pinia 实例
将该实例传给 app.use()，而不是直接 import 默认导出
后续组件中才能使用 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')