Ant Design Pro 4 学习记录 1—使用Yarn安装ADP V4 含所有Block


  • 前序准备（来自官网说明）
  • 安装步骤
    • 1、yarn添加umi
    • 2、安装
      • 2.1 新建一个空的文件夹作为项目目录，在目录下执行
      • 2.2 选择 ant-design-pro：
      • 2.3选择JavaScript
      • 2.4选择proV4
      • 2.5选择complete完整安装，类似于[Preview](http://preview.pro.ant.design/)
    • 3、初始化
    • 4、运行
    • 5、目录结构（来自官网说明）
    • 6、结果截图

前序准备（来自官网说明）

你的本地环境需要安装 yarn、node 和 git。我们的技术栈基于 ES2015+、React、UmiJS、dva、g2 和 antd，提前了解和学习这些知识会非常有帮助。

我的本地环境：git、node、npm、yarn

我的本地环境

安装步骤

1、yarn添加umi

1
yarn global add umi

2、安装

2.1 新建一个空的文件夹作为项目目录，在目录下执行

1
yarn create umi

2.2 选择 ant-design-pro：

1
2
3
4
5
6
 Select the boilerplate type (Use arrow keys)
? ant-design-pro  - Create project with an layout-only ant-design-pro boilerplate, use together with umi block.
  app             - Create project with a simple boilerplate, support typescript.
  block           - Create a umi block.
  library         - Create a library with umi.
  plugin          - Create a umi plugin.

2.3选择JavaScript

1
2
 TypeScript
? JavaScript

2.4选择proV4

1
2
proV5
?proV4

2.5选择complete完整安装，类似于Preview

1
2
simple
?complete

Ant Design Pro 脚手架将会自动安装。

脚手架完成安装

3、初始化

1
yarn

4、运行

1
yarn start

启动后

5、目录结构（来自官网说明）

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

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

6、结果截图

结果截图
[1]: https://pro.ant.design/
[2]: https://preview.pro.ant.design/dashboard/analysis
[3]: https://github.com/ant-design/ant-design-pro/
[4]: https://github.com/ant-design/pro-blocks