完成一个组件库需要考虑的问题
- 代码结构,样式规范: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状态