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

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

  • 代码结构,样式规范: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状态

测试

你可能感兴趣的:(react+ts项目,react.js,javascript,前端)