0.1.24 • Published 3 years ago
juiu-design v0.1.24
react + typescript 完成自己的组件库
Run Dom
npm install
npm start
相关依赖
sass
:css预处理
normalize.css
- 不同的浏览器在对于CSS没有定义的一些样式属性是不一样的,
- 比如没有在自己的CSS里面规定超链接有没有下划线的时候,有些浏览器有,有些浏览器没有;
- 再比如有一些浏览器规定的超链接默认颜色是蓝色,有一些又是黑色。
- 而这个CSS的功能就是对几乎所有的默认样式进行重置,让所有的浏览器上对于未定义的样式浏览效果达到一致
- (虽然说无法完全一致,但至少可以消除掉大部分差距)
- 当然如果你自己的CSS已经对默认样式进行了重置,不使用它也是可以的。
classnames
提供一个方法可以动态绑定class名。const classes = classNames('jujiu', { taige
: isTaige
}) 如果isTaige是true, 等价于class="jujiu taige"
jest
: 通用测试框架
- 适用于babel、typescript、node、react、angular、vue等等。
- 零配置
- 安全且运行速度超快
- 是create-react-app 默认的测试框架,已经内置,可以直接使用
react-testing-library
- 除了通用测试框架,测试react组件,还需要react-testing-library。create-react-app@3.3.0以上已经内置了该插件。
react-fontawesome
- react的图标库插件
rimraf
: 可以用来删除文件
组件库颜色体系
系统颜色
:作为基架的颜色产品颜色
:组件的颜色
知识点
- useEffect如果没有第二个参数,那么只要useState的值发生变化就会触发,如果值为某个或者某几个useState,那么只有当这些指定的useState变化时才会触发
- useContext作用, react是单项数据流,父组件向子组件传递,组件结构如果嵌套太深,向内层传递参数就需要手动一层层的传递,useContext的作用就可以让内层的组件直接拿到外层提供者的参数。
packahe.json
的dependencies
中的依赖都是项目运行所必须的,devDependencies
中的依赖只在开发时使用, 不参与到生成环境.peerDependencies
表示组件库所依赖的库(例如:element-ui依赖于vue,要想使用element-ui就必须先安装vue)
本地测试组件库
- 如果我们的组件库项目名为jujiu-design,测试组件的项目为jujiu-design-test(一个react的项目)
- jujiu-design的终端输入
npm link
, 改命令把软连接创建到全局 - 进入jujiu-design-test目录,然后在该项目终端输入
npm link jujiu-design
这样就又创建了一个软连接,把jujiu-design连接了起来。 - 本地测试组件的时候可能会出现组件库和项目中的react版本不同,而导致报错,可以在jujiu-design的终端使用命令
npm link ../jujiu-design-test/node_modules/react
指明使用jujiu-design-test项目的react版本 - 在
jujiu-design-test
项目中的package.json
的dependencies
中写入虚拟依赖:"jujiu-design": "0.1.0"
- 引入组件库相关:
import { Button } from 'jujiu-design'
、import 'jujiu-design/build/index.css'
发布流程
npm run build
npm publish
: npm不能使用淘宝镜像,请切换到源npm config set registry https://registry.npmjs.org
0.1.24
3 years ago
0.1.14
3 years ago
0.1.15
3 years ago
0.1.20
3 years ago
0.1.21
3 years ago
0.1.22
3 years ago
0.1.23
3 years ago
0.1.16
3 years ago
0.1.18
3 years ago
0.1.19
3 years ago
0.1.10
3 years ago
0.1.11
3 years ago
0.1.12
3 years ago
0.1.13
3 years ago
0.1.9
3 years ago
0.1.8
3 years ago
0.1.7
3 years ago
0.1.6
3 years ago
0.1.5
3 years ago
0.1.4
3 years ago
0.1.3
3 years ago
0.1.2
3 years ago
0.1.1
3 years ago
0.1.0
3 years ago