阿里lowcodeEngine集成自定义组件库

1 创建react组件库

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

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

• 1创建完成之后，执行npm i安装依赖包,下图为初始化完成的项目结构
  
• 2执行npm run lowcode:dev目录中会生成lowcode的文件夹，里面包含了默认自带的两个组件的描述
  ![上传中...]()
  打开默认给我们起的服务可以看到以下页面，初始化组件库时内部会默认生成Button和Input组件，如下图
  
• 3 执行npm run lowcode:build
  会生成一个build文件夹
  

3 上传npm

• 1. 登录npm
     npm login
     
• 2. 上传包至npm
     npm publish,可以看到下图已经上传成功了，那么我们登录npm去查看一下是否有上传记录
     
     

4 将组件库引入到项目中（下图中的项目是从github拉的demo）

• 1 打开组件库中的build文件夹中有一个assets.prod.json文件,将packages和components数组中的内容merge到项目中的src/universal/assets.json中
  
  值得一提的是，默认生成的路径加载会很慢甚至加载不出来
  
  这里可以将前面的域名更换成jsdelivr的域名，所有引入的前缀都替换
  
• 2 启动项目查看效果
  可以看到下图已经加载出来我们的组件库了
  ![上传中...]()

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