使用vue3+ts实现组件库并发布到npm(会持续更新)

博主目前已在一家公司实习,技术总监挺厉害的源代码也都公开,使用的技术也比较新,学习了一段时间过后想自己写一点插件之类的。

目前个人计划是先做一个组件库,再做一个页面栈管理的插件。先说说组件库,个人并不打算像ant-design和element-ui那样把所有的常用的页面组件写出来,没有太多必要而且也肯定是远不如这些成熟的组件库的,所以个人的想法是,补盲。目前对这个组件库的内容想法就是一个分页组件,还有一个弹窗的组件。这些都是我个人在实习中遇到的,在我自己实习做的项目由于是商用项目是比较少使用到这些第三方组件,更多的是技术总监自己写的一些组件(使用原生)以及设计师提供的素材。

对于分页组件,想法是让他自动化分页,根据传递的数据总条数、所要展示的页数以及每页的条数来进行自动化排版布局(这里看不懂没关系,已实现好下一篇文章会详细讲解如何使用,后续也会开源并写文档),以及附加功能(可用可不用,对使用者会有数据泄露的风险哈哈哈):就是可以将所有数据传递进去,点击页面转换可以自动把目前页数对应的数据返回给使用者,貌似现在有些都是懒加载了对于数据量大的情况,想到这我还得加上一个返回当前页数的功能。样式方面我会把一些class写在文档上,使用深度选择器可以去修改,目前都是用vh来布局。

对于弹窗,想法是可以将所有的自定义组件弹出来,而没有固定的条条框框,这个后续会去弄一下

目前这个组件库是已经发布了,还在测试版本

下面讲一下遇到的问题:

1.按需引入,这个还没实现,昨天才开始做这个东西,查一下需要babel插件,但我的组件库是精简版的或许还不需要?所以目前使用只能全局引入

2.发布时的一些问题

package.json需要配置一下

"name": "windslayer-ui",//这个尽量要特别一点,不然很可能会因为重名而不能发布
  "private": false,
  "version": "1.0.2",//每次更新都要改版本号
  "description": "wind-ui,个人以自己工作项目经验需求而实现的组件库",
  "author": "Wild-Wind",
  "license": "ISC",
  "main": "./src/components/index.ts",//这个是import时的入口,必须写好

 

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值