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