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

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

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

咱们会提供一系列介绍码良实现的文章

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

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

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

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

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

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

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

码良组件开发

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。