Vue Academy · 课时

插件架构与 app.use()

插件对象 { install(app, options) }，以及访问 app.component、app.directive、app.provide

插件架构与 app.use() 是 CoddyKit 上的免费 Vue Academy 课时。这是第 1 节课，共 4 节。你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。这是 Vue Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 Vue Academy 课程共包含 4 节课。

什么是 Vue 插件

Vue 插件是可复用的代码，用于添加 app 级别的功能，例如全局组件、指令、注入的服务或 config。示例包括 Vue Router、Pinia 和 i18n 库。

您只需使用 app.use(plugin) 注册插件一次。

安装约定

插件可以是包含 install(app, options) 方法的对象，也可以是直接用作 install 的函数。Vue 会将 app 实例和您传入的所有选项传给它。

const myPlugin = {
  install(app, options) {
    // register things on the app here
    console.log('installing with', options)
  }
}

export default myPlugin

注册全局组件

在 install 中使用 app.component(name, definition)，即可注册一个无需导入、在每个模板中都可用的 component。

import BaseButton from './BaseButton.vue'
import BaseIcon from './BaseIcon.vue'

const uiKit = {
  install(app) {
    app.component('BaseButton', BaseButton)
    app.component('BaseIcon', BaseIcon)
  }
}

注册全局指令

使用 app.directive(name, definition) 全局注册自定义 directive，例如 v-focus 或 v-tooltip。

const focusPlugin = {
  install(app) {
    app.directive('focus', {
      mounted(el) {
        el.focus()
      }
    })
  }
}

// usage in any template: <input v-focus />

提供可注入的服务

app.provide(key, value) 会公开一个值，任何后代组件都可以通过 inject(key) 读取。与使用全局变量相比，这是共享服务（例如 API client、config）的现代方式。

const apiPlugin = {
  install(app, options) {
    const client = createClient(options.baseURL)
    app.provide('api', client)
  }
}

使用所提供的服务

任何组件都可以使用 inject 读取插件提供的内容。为确保安全，请优先使用类型化的注入键（即一个 Symbol），但字符串键同样可用。

<script setup>
import { inject } from 'vue'

const api = inject('api')
async function load() {
  const data = await api.get('/users')
}
</script>

向插件传递选项

app.use 的第二个参数会作为 install 的 options 参数传入。您可以用它在注册时配置行为。

import { createApp } from 'vue'
import App from './App.vue'
import apiPlugin from './plugins/api'

const app = createApp(App)
app.use(apiPlugin, { baseURL: 'https://api.example.com' })
app.mount('#app')

插件在 mount 之前运行

所有 app.use 调用都会在 app.mount 之前执行。到 mount 时，所有全局组件、directive 和所提供的值都已注册，因此首次渲染时就可以访问它们。

const app = createApp(App)
app.use(router)
app.use(pinia)
app.use(uiKit)
// everything is registered, now render
app.mount('#app')

幂等安装

Vue 会阻止在同一个 app 上安装相同的插件两次——第二次使用相同插件调用 app.use 时会被忽略。不过，您仍应将 install 设计得足够安全，并避免在 app 实例之外产生副作用。

app.use(myPlugin) // installs
app.use(myPlugin) // ignored, no double registration

一个完整的最小插件

综合起来，一个插件可以在同一个 install 方法中注册组件、指令并提供 service。

import Banner from './Banner.vue'

export default {
  install(app, options = {}) {
    app.component('AppBanner', Banner)
    app.directive('focus', { mounted: (el) => el.focus() })
    app.provide('config', { theme: options.theme || 'light' })
  }
}

插件与可组合函数

对于只运行一次的全应用设置（例如全局组件、提供单例 service），请使用插件。对于由各个组件分别使用的可复用有状态逻辑，请使用可组合函数。插件通常会先设置内容，之后可组合函数再通过 inject 读取这些内容。

快速检查

请检验您对插件架构的理解。

回顾

您学到了插件架构：

插件公开 install(app, options)（或者本身就是一个函数）
app.component / app.directive 用于注册全局内容
app.provide 公开可注入的服务，可通过 inject 读取
app.use(plugin, options) 会在 mount 之前注册插件
安装具有幂等性——重复安装会被忽略

常见问题解答

「插件架构与 app.use()」课时是免费的吗？

是的 — 「插件架构与 app.use()」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Vue Academy 课程的其余内容，请升级到 CoddyKit PRO。 Vue Academy 课程共包含 4 节课。

「插件架构与 app.use()」这节课中我会学到什么？

插件对象 { install(app, options) }，以及访问 app.component、app.directive、app.provide 你通过在浏览器中直接运行的动手代码来练习 Vue Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 Vue Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 Vue Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。这是第 1 节课，共 4 节。

「插件架构与 app.use()」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 Vue Academy 课中编写并运行代码吗？

能。每节 Vue Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

← 返回 Vue Academy