qsoft-x6-materials

一个面向 PC 的业务组件库

node： 16.x

调试

下载依赖

npm install

启动调试

npm run lowcode:dev             # 打开开发环境，运行所有组件

构建

npm run lowcode:build

组件开发

1. 切换镜像源

切换到npm官方镜像源

npm config set registry https://registry.npmjs.org/

淘宝镜像源

 npm config set registry https://registry.npmmirror.com

2. 创建动作库组件

2.1 创建组件

在src/components目录下创建组件文件夹，文件夹下创建index.tsx文件， index.tsx文件内容可以直接参考send-email组件或compo组件的写法，具 体扩展查看antv/x6官方文档： https://x6.antv.vision/zh/examples/gallery

2.2 创建mate.ts文件

在lowcode文件下自行创建与组件同名的文件，里面包含mate.ts文件，mate 中的参数其实都差不多，其中configure下的参数与主组件的index文件相关联 ，可以查看不同组件的mate.ts文件，看看有什么区别。总之，mate.ts要通过 手动创建（我没有通过命令构建出来，所以我自己手动创建的），参照其他组件的 mate.ts文件书写方式，根据组件的index文件内容调整configure下的参数。

2.3 修改package.json文件

根据需要，调整name（不能重名），修改版本（每次构建之前必须修改版本）， mate.ts中的组件版本可以修改也可以不修改。

2.4 发布组件

构建

npm run lowcode:build

登录npm

npm login

发布

npm publish

组件使用

发布成功后，使用build/lowcode/render下的assets-prod.json，粘贴到我们的demo中的assets.json文件中，然后刷新页面即可看到新发布的组件。

注意

1. 组件的name不能重名，如果发布成功后，在下一次构建之前必须修改版本，否则会报错。
2. 组件的mate.ts文件需要手动创建，不能通过命令构建出来。
3. 组件的mate.ts文件中的参数与主组件的index文件相关联，需要根据组件的index文件内容调整configure下的参数。
4. 由于这个组件库试运行是设计器的界面，看不到具体修改后的效果，只有发布引用后才能看到具体的效果，所有开发难度很大。