PATD 开发上手指南
React UI library based on Pay.css
结构介绍
- pay-css:这是一个submodule独立的代码库,也是一个独立的项目,用来编写和生成CSS样式的代码库。
- example:这是一个可以运行的项目,用来展示编写的组件样式和测试功能。
- src: 组件在这个目录下编写。
- docs: 这个是PATD官网组件文档引用的md,在这里编写官方文档.
安装
要开始PATD的开发,需要同安装好pay-css,patd,example 三个项目。
请注意你的Node JS 版本:
- Node 版本:16.14.0 (软件超市可以安装)
- npm 版本: 8.5.5
初始化 submodul Pay-css
git submodule init
git submodule update
安装 Pay-css
patd: cd pay-css
pay-css: npm install
安装 Patd
patd: npm install
安装 Example
- 由于Cypress依赖需要外网环境安装,所以安装依赖Cypress时可能会报错。Cypress的报错并不影响项目启动,可以跳过。
- 更好的办法是在package.json当中去掉 Cypress, 这是个用来测试的依赖,开发不会用到。
patd: cd example
example: npm install
启动项目 start
首先启动pay-css,让他生成css文件,patd的大部份样式都依赖于此,编写样式也在这里完成。
patd: cd pay-css
pay-css: npm run start
然后我们就可以开始开发了,启动我们的patd
patd: npm run start
最后我们想要查看我们的组件效果,所以也要启动example项目,实时查看最终的效果。
patd: cd example
example: npm run start
同时启动以上三个项目,最后打开http://localhost:3000/#/ 就可以开始开发了