1. 简介

其实我接触的第一个React项目就是 Ant Design Pro 搭建的一个后台，在开发中屡次碰壁，每次解决问题都需要花费很久时间，发现不能这样下去，才系统性的开始学习React、然后又了解到了React的 各种生态库，慢慢的开始喜欢上使用React开发项目。

Ant Design Pro 开箱即用的脚手架，已经为我们封装好了国际化、权限、网络请求、mock、路由、状态管理等常用的技术，帮助我们减少学习和开发成本

2. 代码案例

1. 搭建一个antd pro的React项目，先Run起来看到效果

sudo npm i @ant-design/pro-cli -g

pro create demo10

2. 选择

• umi@4

3. 安装依赖，运行 dev

pnpm i 

npm run start:dev

4. 我看接下来到浏览器上查看

1. http://localhost:8000/user/login
2. 看到界面但是登陆不了
3. 修改代理config/proxy.ts文件，使用test环境

dev: {
  '/api/': {
    // 要代理的地址
    target: 'https://proapi.azurewebsites.net',
    changeOrigin: true,
  },
}

1. 再次登陆就可以看到成功了。

5. 了解项目

1. 我们可以看到的很好看的UI界面就是Ant Design 前端组件库
2. 我们修改的代理则是 umijs， 一个 webpack 之上的整合工具
3. 查看项目，我们可以看一下了解一下重要的文件目录，真正重要的就只是config，其他的都是前端开发特熟悉的几个目录

├── config                   # umi 配置，包含路由，构建等配置
├── src
│   ├── assets               # 静态资源
│   ├── components           # 通用组件
│   ├── pages                # 业务页面入口和常用模板
│   ├── services             # 后台接口服务
│   ├── utils                # 工具库
└── package.json

6. 尝试修改项目

1. 使用这种框架千万别怕改坏了，改了之后运行不起来，大胆的改，改坏了重新create一个就好了
2. 先尝试修改config\defaultSettings.ts文件，这个文件是一个主题、标题、logo的一个配置文件

import {ProLayoutProps} from '@ant-design/pro-components';

const Settings: ProLayoutProps & {
  pwa?: boolean;
  logo?: string;
} = {
  navTheme: 'light',
  colorPrimary: '#fa541c',
  layout: 'top',
  contentWidth: 'Fixed',
  fixedHeader: true,
  fixSiderbar: true,
  colorWeak: false,
  title: '标题',
  pwa: false,
  menu: {
    locale: false,
  },
  logo: 'https://th.bing.com/th?id=OSK.1bccade414847de73e297d42c59a8ec9&w=117&h=82&c=7&o=6&dpr=2&pid=SANGAM',
  iconfontUrl: '',
};

export default Settings;

1. 这样就可以看到一个挺漂亮的后台了

7. 新增一个页面

1. 我们新增一个学生列表页
2. 新建src/pages/Student/index.tsx 文件

export default ()=>{
  return <h1>
    学生页
  </h1>
}

1. 添加路由 config/routes.ts 文件中添加一个

{
  path: '/student',
  name: 'student',
  icon: 'smile',
  component: './Student',
}

1. 打开地址 http://localhost:8000/student
2. 　就可以看到已经创建好了一个页面，并且连导航上也有了

3. 总结

1. 开发中快速使用antd pro 来快速开发一个后台管理系统
2. 了解并熟悉，该框架的一些操作与配置