【react+ts项目】】组件库启航

完成一个组件库涉及多个方面,包括确定代码结构和样式规范,如使用eslint进行前端代码规范,选择Inlinecss,cssinjs,styledcomponent,或者sass/less等方案。此外,需进行组件需求分析和编码,编写测试用例,以及处理代码打包和发布。例如,针对按钮组件,要涵盖不同类型、尺寸和禁用状态。同时,应用normalize.css标准化浏览器样式,并管理样式变量,如色彩、字体和按钮设计。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

完成一个组件库需要考虑的问题

  • 代码结构,样式规范:eslint
  • 前端代码规范
  • 样式解决方案:Inline css ;css in js ; styled component ;sass/less
  • 组件需求分析和编码
  • 组件测试用例分析和编码
  • 代码打包输出和发布
npm install node-sass --save

sass教程
sass中文网

组件库样式变量分类

  • 基础色彩系统
  • 字体系统
  • 表单
  • 按钮
  • 边框和阴影
  • 可配置开关

添加 normalize.css:一般化大部分浏览器的默认样式
样式入口文件:引入成果

button

button组件需求分析
  • 不同的Button type
  • 不同的Button size
  • disabled状态

测试

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值