nocobase/docs/zh-CN/development/your-fisrt-plugin.md
chenos a6eebb940f
feat: update docs (#990)
* feat: improve code

* feat: update docs

* feat: update docs

* Update index.md

* Update features.md

* Update when.md

* Update contributing.md

* Update translations.md

* feat: clean up

* Add files via upload

* Update the-first-app.md

* Update plugins.md

* Update a-b-c.md

* Update blocks.md

* feat: update docs

* Add files via upload

* Update charts.md

* feat: update navs

* Update index.md

* Update index.md

* Update features.md

* Update index.md

* Update docker-compose.md

* Update create-nocobase-app.md

* Update git-clone.md

* Update contributing.md

* Update translations.md

* Update plugins.md

* Update the-first-app.md

* Add files via upload

* Update charts.md

* Update charts.md

* Update a-b-c.md

* Update collections.md

* Update menus.md

* Update menus.md

Co-authored-by: Zhou <zhou.working@gmail.com>
2022-10-31 11:52:17 +08:00

2.4 KiB
Raw Blame History

编写第一个插件

在此之前,需要先安装好 NocoBase

安装好 NocoBase 之后,我们就可以开始插件开发之旅了。

创建插件

首先,你可以通过 CLI 快速的创建一个空插件,命令如下:

yarn pm create hello

插件所在目录 packages/plugins/hello,插件目录结构为:

|- /hello
  |- /src
    |- /client      # 插件客户端代码
    |- /server      # 插件服务端代码
  |- client.d.ts
  |- client.js
  |- package.json   # 插件包信息
  |- server.d.ts
  |- server.js

package.json 信息

{
  "name": "@nocobase/plugin-hello",
  "version": "0.1.0",
  "main": "lib/server/index.js",
  "devDependencies": {
    "@nocobase/client": "0.8.0-alpha.1",
    "@nocobase/test": "0.8.0-alpha.1"
  }
}

NocoBase 插件也是 NPM 包,插件名和 NPM 包名的对应规则为 ${PLUGIN_PACKAGE_PREFIX}-${pluginName}

PLUGIN_PACKAGE_PREFIX 为插件包前缀,可以在 .env 里自定义,点此查看 PLUGIN_PACKAGE_PREFIX 说明

编写插件

查看 packages/plugins/hello/src/server/plugin.ts 文件,并修改为:

import { InstallOptions, Plugin } from '@nocobase/server';

export class HelloPlugin extends Plugin {
  afterAdd() {}

  beforeLoad() {}

  async load() {
    this.db.collection({
      name: 'hello',
      fields: [
        { type: 'string', name: 'name' }
      ],
    });
    this.app.acl.allow('hello', '*');
  }

  async install(options?: InstallOptions) {}

  async afterEnable() {}

  async afterDisable() {}

  async remove() {}
}

export default HelloPlugin;

注册插件

yarn pm add hello

激活插件

插件激活时,会自动创建刚才编辑插件配置的 hello 表。

yarn pm enable hello

启动应用

# for development
yarn dev

# for production
yarn build
yarn start

体验插件功能

向插件的 hello 表里插入数据

curl --location --request POST 'http://localhost:13000/api/hello:create' \
--header 'Content-Type: application/json' \
--data-raw '{
    "name": "Hello world"
}'

查看 hello 表数据

curl --location --request GET 'http://localhost:13000/api/hello:list'