CMS2.0 外部控件

代码管理

• 代码应该存放于 https://gitlab.syc-cms.com/fe 前端分组下
• 现有一个 cms2.0-widgets 的仓库
• 可以分多个仓库，也可以单个仓库
• 也可以用分支划分不同的项目
• 一个仓库可以包含多个控件

打包机制

• 使用构建工具打包输出 js ，该 js 包含其导出的一个或多个控件，相当于一个控件包
• 打包之后的结果会排除 Vue，最终与基座使用同一个 Vue
• 所以 Vue 的版本应该操持一致，避免开发时与打包后因版本不同而导致不一致
• 输出的结果应如下
  • dist
    • Widget1
      • index.js
      • ...
    • Widget2
      • index.js
      • ...

加载机制

• 打包后的外部控件，应放置于服务器 wwwroot/widgets 目录下
• 基座会通过接口返回的外部控件 WidgetX/index.js url 列表，然后通过 import('WidgetX/index.js') 进行引入
• 基座将引入的控件包的控件注册到控件库
• 控件库中即可看到引入的控件，并且可以进行使用

示例代码

git clone https://gitlab.syc-cms.com:8443/fe/cms2.0-widgets.git

开发文档

• 一个控件包含以下内容

type Widget = {
  is: string
  name: string
  category: string
  icon: string
  canvasView: DefineComponent // 画布视图 import X from 'X.vue'
  settingsView: DefineComponent // 设置视图 import XSettings from 'X.settings.vue'
}

• is 是控件的唯一标识，如果相同将会被覆盖
• 其它与内部控件相同