高效学习 React 框架AntDesign Pro
高效学习 用框架做项目。
第一步命令行运行下列命令，快速启动开发服务
$ npm i @ant-design/pro-cli -g
$ pro create my-app
$ cd my-app
$ npm i
$ npm run start
# 打开浏览器访问 http://localhost:8000
# 如果安装过程中出现报错，请更新包
$ npm update
第二步，快速了解ant design pro目录文件
package.json 文件相关的配置和版本，充分了解这些配置有助于我们提高开发的效率
config #目录配置信息文件夹
config -- routes.ts 路由文件
mock #模拟数据文件夹
public # 静态资源文件夹
src # 源代码文件夹
pages # 页面文件夹
第三步，组件总览 - Ant Design快速看一遍。
https://ant-design.antgroup.com/components/overview-cn第四步，尝试改动代码。比如新增菜单栏。
1.查看语言包，了解并掌握字段文字。
src / locales/ zh-CN 文件夹全部预览一遍，找到menu.ts 文件。
'menu.home': '首页', 在这个后面加一个，'menu.user': '用户',
第五步，在路由文件添加路由信息
{
path: '/welcome',
name: 'home',
icon: 'smile',
component: './Welcome',
},
后面加一段代码
{
path: '/welcome',
name: 'user',
icon: 'smile',
component: './Welcome',
},然后你就看到，导航栏有变化了，有个初步了解。就根据这种方法修改，慢慢深入理解。
第六步。正式项目的架构参考
├── src # 源代码文件夹
│ ├── api # API 接口文件夹
│ ├── assets # 静态资源文件夹
│ ├── components # 公共组件文件夹
│ ├── layouts # 布局文件夹
│ ├── models # 数据模型文件夹
│ ├── pages # 页面文件夹
│ ├── router # 路由配置文件夹
│ ├── store # Redux 状态管理文件夹
│ ├── styles # 样式文件夹
│ └── utils # 工具函数文件夹请根据需求来，把文件夹和业务代码做一个区分。规范一下
然后继续进行开发吧。