Vue Academy · 课时

插件开发

Q: 「插件开发」这节课中我会学到什么？

创建可安装的 Vue 插件 你通过在浏览器中直接运行的动手代码来练习 Vue Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

创建可安装的 Vue 插件

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

什么是插件

Vue 插件将应用级功能打包起来，您只需调用一次即可安装：全局组件、指令、属性或第三方集成。Vue Router 和 Pinia 等库正是通过插件接入您的应用。

安装函数

插件是一个包含 install 方法的对象（也可以直接是一个函数）。Vue 会将应用实例和您传入的任何选项作为参数调用它。

export const myPlugin = {
  install(app, options) {
    // set up global features here
  }
}

安装插件

使用 app.use 注册插件，也可以选择传入选项对象。Vue 只会运行一次安装函数。

import { createApp } from "vue"
import { myPlugin } from "./myPlugin"

const app = createApp(App)
app.use(myPlugin, { greeting: "Hi" })

注册全局组件

在安装函数内部全局注册组件，这样应用的每个部分都可以使用它们，而无需导入。

import BaseButton from "./BaseButton.vue"

export const uiKit = {
  install(app) {
    app.component("BaseButton", BaseButton)
  }
}

注册全局指令

插件还可以全局注册指令，将相关的 DOM 行为打包成一个可安装的软件包。

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

提供全局属性

使用 app.config.globalProperties 添加一个每个组件实例都可用的属性，适合放置格式化工具或网络客户端等实用工具。

export const apiPlugin = {
  install(app, options) {
    app.config.globalProperties.$api = options.client
  }
}

// in any component: this.$api.get("/users")

使用 provide 实现组合式 API

为了让组合式 API 更易用，请在您的插件中使用 app.provide，这样各个 component 就能在设置阶段注入该值。

export const themePlugin = {
  install(app, options) {
    app.provide("theme", options.theme)
  }
}

// in setup: const theme = inject("theme")

传递选项

选项参数允许用户配置您的插件。请在安装函数中读取它，以便自定义行为。

export const greeter = {
  install(app, options = {}) {
    const word = options.greeting || "Hello"
    app.config.globalProperties.$greet = (name) => word + ", " + name
  }
}

函数式插件

插件可以是一个普通函数，而不必是带有 install 的对象；Vue 会将这个函数本身视为安装器。

export function simplePlugin(app, options) {
  app.config.globalProperties.$version = "1.0.0"
}

app.use(simplePlugin)

完整的插件示例

一个真正的插件通常会把其中几项组合起来：在同一个安装函数中注册一个 component、一个 directive，并添加一个全局属性。

export const toolkit = {
  install(app, options) {
    app.component("BaseButton", BaseButton)
    app.directive("focus", focusDirective)
    app.config.globalProperties.$format = options.formatter
  }
}

何时构建插件

当功能确实需要覆盖整个应用时，再考虑使用插件：例如用户界面工具包、HTTP 层、国际化或分析功能。对于某个功能内部的局部逻辑，可组合函数通常是更合适、更轻量的选择。

快速检查

检验您对插件的掌握情况。

回顾

插件会公开一个 install(app, options) 函数，并通过 app.use 注册。在安装函数中，您可以注册全局 component 和 directive，通过 config.globalProperties 添加全局属性，并使用 provide 提供要注入的值。插件适用于整个应用的功能，可组合函数则适用于局部逻辑。接下来，您将学习如何构建可扩展的项目结构。

常见问题解答

「插件开发」课时是免费的吗？

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

「插件开发」这节课中我会学到什么？

创建可安装的 Vue 插件你通过在浏览器中直接运行的动手代码来练习 Vue Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 Vue Academy 需要有经验吗？

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

「插件开发」课时需要多长时间？

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

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

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

此课程中的所有课时

← 返回 Vue Academy