Antd Pro 快速上手

本文最后更新于：2 年前

Antd Pro官网https://pro.ant.design/docs/getting-started-cn

第一步，安装 umi

yarn create umi

第二步，选择 ant-design-pro

ant-design-pro
image.png
根据需求选择不同的版本、语言、完整区块或核心脚手架

1
2
3
4
5
6
7
success Installed "create-umi@0.26.0" with binaries:
      - create-umi
? Select the boilerplate type ant-design-pro

? ? Be the first to experience the new umi@3 ? Pro V4
? ? Which language do you want to use? JavaScript
? ? Do you need all the blocks or a simple scaffold? complete

image.png

第三步，安装依赖包

推荐使用yarn install ，如果安装失败 清理缓存yarn cache clean，重新安装多试几次
yarn install
安装完成
image.png
启动
yarn start 

1
2
3
4
5
6
7
8
9
10
11
12
13
yarn run v1.22.5
$ cross-env UMI_ENV=dev umi dev
Starting the development server...

√ Webpack
  Compiled successfully in 47.11s

 DONE  Compiled successfully in 47119ms                              下午1:28:37


  App running at:
  - Local:   http://localhost:8001 (copied to clipboard)
  - Network: http://192.168.43.198:8001

点击http://localhost:8001进入
image.png

目录结构

我们已经为你生成了一个完整的开发框架，提供了涵盖中后台开发的各类功能和坑位，下面是整个项目的目录结构。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
├── config                   # umi 配置，包含路由，构建等配置
├── mock                     # 本地模拟数据
├── public
│   └── favicon.png          # Favicon
├── src
│   ├── assets               # 本地静态资源
│   ├── components           # 业务通用组件
│   ├── e2e                  # 集成测试用例
│   ├── layouts              # 通用布局
│   ├── models               # 全局 dva model
│   ├── pages                # 业务页面入口和常用模板
│   ├── services             # 后台接口服务
│   ├── utils                # 工具库
│   ├── locales              # 国际化资源
│   ├── global.less          # 全局样式
│   └── global.ts            # 全局 JS
├── tests                    # 测试工具
├── README.md
└── package.json

页面代码结构推荐

为了让项目代码组织更加规范，让开发能够更方便的定位到相关页面组件代码，我们定义了一套规范，该规范当前只作为推荐的指导，并非强制。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
src
├── components
└── pages
    ├── Welcome        // 路由组件下不应该再包含其他路由组件，基于这个约定就能清楚的区分路由组件和非路由组件了
    |   ├── components // 对于复杂的页面可以再自己做更深层次的组织，但建议不要超过三层
    |   ├── Form.tsx
    |   ├── index.tsx  // 页面组件的代码
    |   └── index.less // 页面样式
    ├── Order          // 路由组件下不应该再包含其他路由组件，基于这个约定就能清楚的区分路由组件和非路由组件了
    |   ├── index.tsx
    |   └── index.less
    ├── user           // 一系列页面推荐通过小写的单一字母做 group 目录
    |   ├── components // group 下公用的组件集合
    |   ├── Login      // group 下的页面 Login
    |   ├── Register   // group 下的页面 Register
    |   └── util.ts    // 这里可以有一些共用方法之类，不做推荐和约束，看业务场景自行做组织
    └── *              // 其它页面组件代码