关于低代码:阿里lowcodeEngine集成自定义组件库

34次阅读

共计 756 个字符,预计需要花费 2 分钟才能阅读完成。

1 创立 react 组件库

执行 npm init @alilc/element rc-meng-0622(组件库的名称)--registry=https://registry.npmmirror.com 初始化组件库,执行完之后提供选项进行抉择即可,下图为我轻易设置的

2 尝试本地和打包之后的变动

  • 1 创立实现之后,执行 npm i 装置依赖包, 下图为初始化实现的我的项目构造
  • 2 执行 npm run lowcode:dev 目录中会生成 lowcode 的文件夹,外面蕴含了默认自带的两个组件的形容
    ![上传中 …]()
    关上默认给咱们起的服务能够看到以下页面,初始化组件库时外部会默认生成 ButtonInput组件,如下图
  • 3 执行 npm run lowcode:build
    会生成一个 build 文件夹

3 上传 npm

    1. 登录 npm
      npm login
    1. 上传包至 npm
      npm publish, 能够看到下图曾经上传胜利了,那么咱们登录 npm 去查看一下是否有上传记录

4 将组件库引入到我的项目中(下图中的我的项目是从 github 拉的 demo)

  • 1 关上组件库中的 build 文件夹中有一个 assets.prod.json 文件, 将 packagescomponents数组中的内容 merge 到我的项目中的 src/universal/assets.json

    值得一提的是,默认生成的门路加载会很慢甚至加载不进去

    这里能够将后面的域名更换成 jsdelivr 的域名,所有引入的前缀都替换
  • 2 启动我的项目查看成果
    能够看到下图曾经加载进去咱们的组件库了
    ![上传中 …]()

视频连贯地址:https://www.bilibili.com/video/BV1dZ4y1m76S/?spm_id_from=333.788&vd_source=670bd370abbff845351b26ed9c3980b3

正文完
 0