九层之台，起于累土：码良组件

本文为“码良系统的使用及设计实现”系列文章的第三篇。

我们会提供一些列介绍码良实现的文章

• 开篇: 码良的正确打开方式
• 码良是如何设计高扩展的在线网页制作平台的
• 神笔已开，我该如何使用

当我们谈论组件时我们在谈论什么

上篇文章给出了大量码良编辑器的使用实例，相信读者对于码良编辑器已经有了直观的认识。

下图是码良编辑器的结构图，

可以看到，整个编辑器的核心是组件，其他配置或功能都是服务于组件的。

在码良系统中，组件是构成页面的基础元素，每个组件各自承担着特异的功能，比如图片组件可以呈现一张图片，文本组件可以展示一段文本。一系列组件按照一定的位置和样式排布在页面内，再加以一定的配置，最终就组成了页面。因此，组件的能力决定了码良的能力，组件的丰富程度即代表了码良的强大程度。

官方提供的大部分组件已经在上篇文章中露过脸了（希望智障机器人给你留下了美好印象），比如图片、文本、富文本、轮播等，都是一些功能较为基础的组件。那么，除了官方组件以外，自制组件如何集成到码良中呢，且看下文介绍。

码良组件开发

gods-pen

gods-pen 是基于 nodejs 的命令行工具，提供了覆盖码良组件开发全流程的工具。

npm install gods-pen-cli -g # install gods-pen

查看帮助 gods-pen help，有四个子命令可用

创建一个组件

gods-pen create my-component

根据提示输入组件名、描述，选择组件分类

项目文件结构如下

可以看到，这是一个典型的 vue 工程。没错，码良组件本身与普通 vue 组件无异，只是在普通 vue 组件的基础上，我们添加了一些约定字段，使组件能被码良编辑器识别、配置。

/src/index.vue 即为刚才创建的组件。组件开发的主要工作就是针对这个组件进行功能开发。

/src/example.vue 提供了一些简单的代码示例和说明。

preview/ 目录下的文件是供开发预览使用的，最终发布的时候是不会打包此文件夹文件的，必要时可以按需修改其中的代码，比如测试组件传参（props）。

icon.png 将作为组件图标随组件发布至组件仓库，您应该将此文件替换为自己的组件图标。

[README.md](http://readme.md) 是组件的详细使用说明，支持 markdown，也会随组件发布上传至组件仓库，在码良编辑器中可以查看组件说明。

不知道你有没有注意到创建组件时，最后一步是选择“是否创建属性配置组件“，所谓属性配置组件就是可以在编辑器中使用此自定义组件来对组件的属性进行配置，而不是使用编辑器默认提供的。editor/ 文件夹下就是属性配置组件，事实上，无论你选择创建此组件与否，这个文件夹都存在，区别仅在于，选择“是“的时候，webpack entry 配置会包含editor/index.vue 文件，反之不包含，因此，当你发现自己需要一个自定义属性配置组件而此前未选择“是”的时候，在 webpack.config.js 中 entry 字段下添加 editor: './editor/index.vue' 即可。

组件开发

码良组件基于 vue，在对 vue 框架有一定了解后就可以轻松开发码良组件了。

上图中，安装了依赖并启动了项目，简单修改组件展示了“hello world”

下图中我们来开发一个简单的卡片组件，包含一张图片，一行文字，图片和文字可配置

截止目前仍然还是一个普通 vue 组件的样子，接受两个参数 img 和 line，如何让编辑器能识别它所需参数并提供合理的输入控件呢，接着看对它的改造

可以看到，我们为 img 参数和 line 参数都添加了一个 editor 字段，并指定了 editor.type 和 editor.label，type 为“image”代表了编辑器应该为该参数提供一个图片选择器，label 为“图片”表示在编辑器中应将该参数显示为“图片”，更多的 type 输入类型请参考文档。

组件构建和发布

组件开发完成，准备一张美美的图片替换 icon.png 作为组件图标，写好组件 readme，确认一下 package.json 组件版本号（version 字段）是否最新、组件中文名（label 字段）是否已配置，准备停当就可以发布了。

如果此前没有设置过组件仓库，请先执行设置命令

# 设置为官方组件仓库 godspen.ymm56.com
gods-pen config registry https://godspen.ymm56.com

执行发布（含自动构建）

gods-pen publish -t [access-token]

其中 access-token 请在码良管理后台——用户设置获取。

这就发布成功了，使用一下吧

闲话

例行求体验，例行求 star。