VuePressVuePress
  • 介绍
  • 快速上手
  • 配置
  • 页面
  • Markdown
  • 静态资源
  • 多语言支持
  • 部署
  • 主题
  • 插件
  • 打包工具
  • 从 v1 迁移
  • 常见问题
  • 核心

    • 命令行接口
    • 配置
    • Frontmatter
    • 内置组件
    • 插件 API
    • 主题 API
    • 客户端 API
    • Node API
  • 打包工具

    • Vite
    • Webpack
  • 生态系统

    • 默认主题
    • 插件
  • 深入

    • 架构
    • 开发插件
    • 开发主题
    • Cookbook
  • 其他资源

    • 生态系统
    • 市场
    • 贡献指南
  • 更新日志
  • v1.x
  • v0.x
  • English
  • 简体中文
GitHub
  • 介绍
  • 快速上手
  • 配置
  • 页面
  • Markdown
  • 静态资源
  • 多语言支持
  • 部署
  • 主题
  • 插件
  • 打包工具
  • 从 v1 迁移
  • 常见问题
  • 核心

    • 命令行接口
    • 配置
    • Frontmatter
    • 内置组件
    • 插件 API
    • 主题 API
    • 客户端 API
    • Node API
  • 打包工具

    • Vite
    • Webpack
  • 生态系统

    • 默认主题
    • 插件
  • 深入

    • 架构
    • 开发插件
    • 开发主题
    • Cookbook
  • 其他资源

    • 生态系统
    • 市场
    • 贡献指南
  • 更新日志
  • v1.x
  • v0.x
  • English
  • 简体中文
GitHub
  • 深入

    • 架构
    • 开发插件
    • 开发主题
  • Cookbook

    • 介绍
    • 客户端配置的使用方法
    • 添加额外页面
    • 开发一个可继承的主题
    • 向客户端代码传递数据
    • Markdown 与 Vue SFC
    • 解析路由

开发插件

提示

在阅读该指南之前,你最好先了解一下 VuePress 的 架构 。

创建一个插件

插件是一个符合 插件 API 的普通 JavaScript 对象,称之为 插件对象 :

const fooPlugin = {
  name: 'vuepress-plugin-foo',
  // ...
}

插件还可以是一个接收 App 实例 作为参数,且返回值为 插件对象 的函数,称之为 插件函数 :

const barPlugin = (app) => ({
  name: 'vuepress-plugin-bar',
  // ...
})

插件通常需要允许用户传入配置,因此我们一般都会提供给用户一个函数来接收配置,然后将 插件对象 或者 插件函数 作为返回值。于是,你的插件应该转换成这样的形式:

const fooPlugin = (options) => ({
  name: 'vuepress-plugin-foo',
  // ...
})

const barPlugin = (options) => (app) => ({
  name: 'vuepress-plugin-bar',
  // ...
})

发布到 NPM

在创建了插件之后,你需要在 package.json 文件中遵循一定的约定,然后再将其发布到 NPM 上:

{
  "name": "vuepress-plugin-foo",
  "keywords": ["vuepress-plugin"]
}
  • 将 name 按照约定命名,即 vuepress-plugin-xxx 或 @org/vuepress-plugin-xxx ,它应该和 插件对象 的 name 字段保持一致。
  • 在 keywords 中包含 vuepress-plugin ,这样用户可以在 NPM 上搜索到你的插件。
在 GitHub 上编辑此页
上次更新: 2024/8/31 07:59
贡献者: meteorlxy, Mr.Hope, Xinyu Liu
Prev
架构
Next
开发主题