查看“VuePress开发插件”的源代码

== 创建一个插件 ==

插件是一个符合 插件 API 的普通 JavaScript 对象，称之为 ''插件对象'' ：

<syntaxhighlight lang="ts">const fooPlugin = {
  name: 'vuepress-plugin-foo',
  // ...
}</syntaxhighlight>
插件还可以是一个接收 App 实例 作为参数，且返回值为 ''插件对象'' 的函数，称之为 ''插件函数'' ：

<syntaxhighlight lang="ts">const barPlugin = (app) => {
  return {
    name: 'vuepress-plugin-bar',
    // ...
  }
}</syntaxhighlight>
插件通常需要允许用户传入配置，因此我们一般都会提供给用户一个函数来接收配置，然后将 ''插件对象'' 或者 ''插件函数'' 作为返回值。于是，你的插件应该转换成这样的形式：

<syntaxhighlight lang="ts">const fooPlugin = (options) => {
  return {
    name: 'vuepress-plugin-foo',
    // ...
  }
}

const barPlugin = (options) => {
  return (app) => {
    return {
      name: 'vuepress-plugin-bar',
      // ...
    }
  }
}</syntaxhighlight>
<span id="发布到-npm"></span>
== 发布到 NPM ==

在创建了插件之后，你需要在 [https://docs.npmjs.com/cli/v8/configuring-npm/package-json package.json] 文件中遵循一定的约定，然后再将其发布到 NPM 上：

<syntaxhighlight lang="json">{
  "name": "vuepress-plugin-foo",
  "keywords": [
    "vuepress-plugin"
  ]
}</syntaxhighlight>
* 将 <code>name</code> 按照约定命名，即 <code>vuepress-plugin-xxx</code> 或 <code>@org/vuepress-plugin-xxx</code> ，它应该和 ''插件对象'' 的 name 字段保持一致。
* 在 <code>keywords</code> 中包含 <code>vuepress-plugin</code> ，这样用户可以在 NPM 上搜索到你的插件。