0Pricing
Frontend Academy · 课时

插件系统：app.use()

将 Vue 插件创建为带有 install 方法的对象，注册全局组件和指令，并向整个应用提供值。

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

什么是 Vue 插件

插件是您安装到 Vue app 中的可复用功能：全局组件、指令、provide 值、原型风格的辅助工具（路由器、i18n、Pinia）。插件是库与 Vue 集成的方式。

插件结构

插件是一个带有 install(app, options) 方法的对象，也可以是充当安装方法的函数。

// MyPlugin.ts
export default {
  install(app, options) {
    // Configure things here
  }
};

安装插件

在 Vue app 实例上调用 app.use(plugin, options)。

import { createApp } from 'vue';
import App from './App.vue';
import MyPlugin from './plugins/MyPlugin';

const app = createApp(App);
app.use(MyPlugin, { theme: 'dark' });
app.mount('#app');

插件使用场景：全局组件

全局注册许多小型组件，这样使用者就不必逐一导入它们。

// plugins/iconPack.ts
import IconChevron from './IconChevron.vue';
import IconClose from './IconClose.vue';
import IconUser from './IconUser.vue';

export default {
  install(app) {
    app.component('IconChevron', IconChevron);
    app.component('IconClose', IconClose);
    app.component('IconUser', IconUser);
  }
};

// main.ts
app.use(iconPack);

插件使用场景：全局指令

一次注册自定义指令，使其在整个 app 中可用。

export default {
  install(app) {
    app.directive('focus', { mounted: (el) => el.focus() });
    app.directive('click-outside', clickOutsideDirective);
  }
};

插件使用场景：provide()

提供应用范围内的值，任何组件都可以注入这些值，API 客户端和配置经常采用这种方式。

import type { InjectionKey } from 'vue';
import { ApiClient } from './ApiClient';

export const ApiKey: InjectionKey<ApiClient> = Symbol('api');

export default {
  install(app, { baseURL }) {
    const api = new ApiClient({ baseURL });
    app.provide(ApiKey, api);
  }
};

// Anywhere:
const api = inject(ApiKey)!;

实际插件：Pinia、Vue Router、i18n

Vue 生态系统中的主要库都是插件。

import { createPinia } from 'pinia';
import router from './router';
import { createI18n } from 'vue-i18n';

const app = createApp(App);
app.use(createPinia());
app.use(router);
app.use(createI18n({ /* ... */ }));

插件选项

插件接受选项，以便在安装时配置其行为。

app.use(MyPlugin, {
  apiUrl: 'https://api.example.com',
  enableLogs: true,
  theme: 'dark'
});

// Inside the plugin:
install(app, options) {
  if (options.enableLogs) console.log('plugin installed');
}

TypeScript 类型扩展

对于 globalProperties 或注入辅助工具，请扩展 Vue 的类型，以便使用者获得自动补全。

// types.d.ts
declare module '@vue/runtime-core' {
  interface ComponentCustomProperties {
    $api: ApiClient;
  }
}

// In plugin:
install(app) {
  app.config.globalProperties.$api = new ApiClient();
}

globalProperties — 旧模式

app.config.globalProperties.$foo 会将一个值公开为选项式 API 组件和模板中的 this.$foo。组合式 API 更倾向于使用 inject()。

幂等安装

即使安装两次也不要崩溃——请检查标志，或使用基于 Symbol 的 provide 键，因为它们可以自然地去重。

编写自己的插件

如果多个 app 会复用某项配置（身份验证包装器、遥测设置、设计令牌），请将它们打包为插件。使用简洁的 install(app, options) 签名发布到 npm，是以符合 Vue 习惯的方式交付可复用功能。

快速检查

要安装插件，应在 Vue app 实例上调用哪个方法？

回顾：Vue 插件

插件 = 带有 install(app, options) 的对象。通过 app.use(plugin, options) 安装。可用于注册全局组件、指令、provide 值，以及配置库。Pinia、Vue Router、i18n 都是插件。扩展 ComponentCustomProperties，以支持带 $ 前缀的属性。请确保 install 具有幂等性。

常见问题解答

「插件系统：app.use()」课时是免费的吗？

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

「插件系统：app.use()」这节课中我会学到什么？

将 Vue 插件创建为带有 install 方法的对象，注册全局组件和指令，并向整个应用提供值。 你通过在浏览器中直接运行的动手代码来练习 Frontend Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 Frontend Academy 需要有经验吗？

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

「插件系统：app.use()」课时需要多长时间？

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

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

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

此课程中的所有课时

  1. 使用 provide() 和 inject() 实现依赖注入
  2. 异步组件与 Suspense
  3. 自定义指令
  4. 插件系统：app.use()
← 返回 Frontend Academy