qsoft-x6-materials-six

Version:

qsoft-x6-materials

unpkg.com/qsoft-x6-materials-six@1.2.6/build/index.html

77 lines (62 loc) • 2.31 kB

Markdown

# 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. 由于这个组件库试运行是设计器的界面，看不到具体修改后的效果，只有发布引用后才能看到具体的效果，所有开发难度很大。