这个章节,我们将告诉你怎么开发一个云写作插件
首先确保你已经安装了[Node.js](https://nodejs.org/en/),然后安装云写作插件的开发工具:
```
npm install -g @topwrite/plugin-cli
```
安装完成后,此工具会提供一个命令`ttwp`
![](https://img.kancloud.cn/13/b1/13b104d3f6ccada59deccc3487a6e7a4_1173x393.png)
我们来创建第一个插件:
![](https://img.kancloud.cn/1f/69/1f6936a9e6dcca3559f31922e907062f_1114x168.png)
这样在目录`plugin-demo`里一个插件的模板就创建好了,然后我们进入这个目录,安装一下依赖
> 这里我们推荐使用`yarn`包管理器,你也可以使用`npm`
```
cd plugin-demo
yarn 或 npm install
```
然后执行`ttwp serve`
![](https://img.kancloud.cn/aa/ce/aacef1339963422676114d343c275cb5_1360x234.png)
这样开发环境的服务就启动了,访问输出的地址,这里是`http://localhost:8080`,端口可能不同
就会打开开发环境的一个编辑器了
![](https://img.kancloud.cn/54/a8/54a87ad7d92e48ca5aaa59b12e4210ed_1920x607.png)
通过右下角预览的按钮可以进入阅读页面的开发环境
现在我们来自定义一个可以输出hello world的智能组件
![](https://img.kancloud.cn/dd/d0/ddd0c5a6c257fabca8eebbd7e329d1ee_1556x271.png)
智能组件的格式为像上图中块状代码,其中的lang内容为中括号包起来的一个标识
然后我们在代码里设置这个智能模块的输出
> 这里所有的组件均需使用import异步加载
```
// index.ts
import createPlugin from '@@/create-plugin';
export default createPlugin({
components: {
'block:demo': () => import('./components/demo')
}
});
```
```
// components/demo.ts
export default function Demo() {
return <div>Hello World</div>;
}
```
这样我们刷新页面后可以看到右边的预览已经变成
![](https://img.kancloud.cn/9d/81/9d8171a76de432bfe39f6c39f9e26625_1106x221.png)
阅读页面也是如此
![](https://img.kancloud.cn/3d/dd/3ddd2aff4087315e3b1fd4358f3aa75f_1612x334.png)
插件开发完成后,执行打包命令
```
ttwp pack
```
这样就会在插件根目录下生成一个tgz插件包,用于后续的发布
本章节到此结束,更多内容参考后续API和组件说明