高效学习 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                 # 工具函数文件夹

请根据需求来，把文件夹和业务代码做一个区分。规范一下

然后继续进行开发吧。