一键生成组件

黄健大约 8 分钟开发手册

PageNow需要二开组件，需要创建一系列文件，我们内置了一键生成的工具，此工具需要另外启动一个Express服务，在前端工程根目录下运行如下命令即可启动：

node express

此服务使用的端口号为3325，如果端口被占用，可以在项目根目录下的express.js文件中进行修改：

如下图所示即启动成功：

注意

一键生成组件只在开发环境下才可以使用，二开组件必须在开发阶段开发好，然后打包发布后才可使用，目前无法做到在生产环境下进行二开组件。

使用一键生成

在开发环境下，前端工程正常启动并且使用admin账号登录系统进入管理控制台，进入【组件库管理】界面，点击【初始化组件相关文件】按钮即可打开一键生成组件文件功能表单：

组件文件名：定义组件文件夹及主文件和配置表单文件的名称，假设定义为TestComp，则会创建一个名称为TestComp的文件夹，同时在此文件夹下创建组件的主文件TestComp.vue和组件的配置表单文件TestCompForm.vue**（特别注意：组件文件名必须不能与平台其他任何组件名称重名，建议在定义组件文件名之前，全局搜索一下项目中是否存在同名的组件）**。
组件别名：定义组件的备注名称，此备注名称会显示在主文件内容的顶部，以注释的方式显示。
组件类别：定义组件属于什么类型的组件，PageNow中，目前定义有三种类型的组件，分别为：普通功能组件、Echarts图表组件、Echarts3D图表组件，每一种类型的组件，都有其对应的主文件和配置表单文件模板，根据您创建的组件的功能来选择对应的组件类别即可。只需要注意，所有非Echarts图表类型的组件，都可以定义为普通功能组件，当Echarts图表使用到了geo3D相关配置的时候，那就选择Echarts3D图表组件类别。
根目录：PageNow中，所有组件都只能在项目【src/component/functional】目录下创建，使用一键生成服务创建的组件文件夹，也会在此目录下生成，而此根目录字段可以定义我们的组件文件夹是生成在functional目录下的什么文件夹下；例如：根目录输入default，那么我们定义的TestComp文件夹就会创建在【src/component/functional/default】目录下，如果输入echarts/bar，则会创建在【src/component/functional/echarts/bar】目录下
注意
目前一键生成组件功能无法自动创建不存在的目录，因此，如果你根目录这一栏输入了src/component/functional/目录下不存在的文件夹，一键生成是无法使用的，因此请提前在源码工程中创建好需要存放组件的目录文件夹

例如我们录入如下组件信息：

在此之前我们先到源码中创建test文件夹，如下图所示：

之后点击【执行】按钮，然后会自动在test文件夹下创建我们的TestComp组件文件夹以及相关主文件和配置表单文件：

至此，我们即完成了组件文件的一键生成，接下来要对组件进行信息的发布，发布后才可以在设计器中拖拽使用我们二开的组件。

发布组件信息

组件相关文件生成完成之后，我们需要在【组件库管理】中进行组件信息的发布，组件信息发布的目的是为了在设计器中

组件分组

在发布组件之前，我们得先确认我们的组件属于什么分组，如果平台默认的分组不满足您的要求，可以创建您自己的分组：

分组图标：PageNow中使用了阿里的iconfont作为主要的图标库，我们也建议您使用，图标库访问地址：https://www.iconfont.cn/open in new window

注意

iconfont中部分图标是版权限制的，使用的时候请注意版权相关的提示。

前往iconfont官网，注册登录您的账号，然后创建一个自己的项目，例如创建一个名称为测试的项目：

然后在此项目下创建自己的图标，为了避免您的图标的class命名与PageNow平台的图标命名冲突，建议将您项目中所有图标的Font Class命名都以【-custom】作为前缀，我们点击图标的编辑按钮，如下图：

重新定义一个Font Class为-custom-code，然后点击仅保存，如下图所示：

之后点击下载至本地按钮，将我们的项目图标库下载下来，解压下载下来的压缩文件：

使用任意编辑器打开iconfont.css文件，然后将下图红框部分内容拷贝至 src/assets/customIconfont/iconfont.css 文件中：

注意：不需要将.iconfont的样式拷贝到 src/assets/customIconfont/iconfont.css 文件中，因为平台已经默认定义了这个样式。

之后我们还需要将下载的图标库中的如下图红框内的相关字体文件，全部拷贝至 src/assets/customIconfont 目录下：

至此，我们已经成功添加了属于您的自定义图标库，那么我们在分组信息表单中，图标字段只需要填入【icon-custom-code】即可在设计器的组件库中显示我们的自定义图标（所有阿里图标库的图标的Class都是以icon作为前缀），如下图所示：

组件信息编辑

找到新创建的分组，点击展开分组信息的图标，之后点击【创建组件信息】按钮，打开组件信息编辑表单：

所属分组：定义组件属于哪个分组
归类：PageNow设计器的组件库栏目中，对应分组下根据此归类字段来对组件进行归类分组，例如填入：全部，那么此组件就会被归类在全部下
组件文件名：此字段必须与组件的主文件名相同，根据此前我们一键生成的组件，例如TestComp
组件别名：组件的备注名称
备注：组件的备注信息
激活：是否激活使用
缩略图URI：组件的缩略图的相对路径，此路径的根文件夹在【src/components/functional】目录下，例如我们的TestComp组件在test目录下，那么缩略图URI则应该填：test/TestComp/TestComp.png
相关信息
组件缩略图请自行创建一个图片文件

填写完毕之后，点击保存，至此即完成了组件的发布，此时我们可以进入设计器中，刷新一下设计器，然后查看组件库栏目中是否已经显示我们新创建的组件的卡片：

接下来就可以直接拖拽卡片，将组件拖入画布中了。

创建其他相关文件

一个可用的组件，必须包含主文件和配置表单文件，如下图中显示的是TestComp组件的文件目录：

红框内TestComp.vue即为组件的主文件，TestCompForm.vue为组件的配置表单文件，我们在开发组件的时候，一键生成功能，默认只会生成这两个文件，因为这是组件能够正常运行所必备的文件，当然，创建一个功能完整的组件，我们可能还需要创建一些其他必要的资源文件，一个功能完整的组件，可能具备如下相关文件，以创建一个TestComp组件为例（注意：组件所有相关的资源文件，都必须在TestComp文件夹下创建）：

TestComp.vue：（必须）主文件，一键生成功能帮我们创建好的
TestCompForm.vue：（必须）配置表单文件，一键生成功能帮我们创建好的（配置表单文件名必须是主文件名跟上Form这样的形式，否则设计器中将无法正常读取组件的配置表单并显示）
TestComp.png：（必须，但如果不创建，也不影响组件的编译使用）组件的缩略图，不一定为png格式，任意图片格式都可以
TestComp.md：（非必须）件的使用说明文档，编写格式为Markdown格式
TestComp.css：（非必须）组件内部使用的额外的样式表
TestComp.js：（非必须）组件使用的额外的脚本
其他：例如图片文件夹、其他一些在组件中使用的vue单文件组件，字体图标文件等