Ant Design Pro v4 安装

安装

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

`yarn` create umi or `npm` create umi

选择ant-design-pro:

 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.

选择TypeScript

? Select the boilerplate type ant-design-pro
? Which language do you want to use? (Use arrow keys)
❯ TypeScript
  JavaScript

由于目前V4 版本还没正式发布 可能会出现错误 可以直接选择克隆仓库

git clone https://github.com/ant-design/ant-design-pro --depth=1
cd ant-design-pro 
yarn
yarn start

如果还需要 v2版本的内容 需要执行

npm run fetch:blocks 

这里我是全部下载 按需加载可以看官网 pro.ant.design/docs/block-… 区快板块

主要目录结构

├── config                   # umi 配置，包含路由，构建等配置
├── mock                     # 本地模拟数据
├── public
│   └── favicon.png          # Favicon
├── src
│   ├── assets               # 本地静态资源
│   ├── components           # 业务通用组件
│   ├── e2e                  # 集成测试用例
│   ├── layouts              # 通用布局
│   ├── models               # 全局 dva model
│   ├── pages                # 业务页面入口和常用模板
│				└── Dashboard 			 # 控制面板模板
│				└── ........				 # 其他模板
│   ├── services             # 后台接口服务
│   ├── utils                # 工具库
│   ├── locales              # 国际化资源
│   ├── global.less          # 全局样式
│   └── global.ts            # 全局 JS
├── tests                    # 测试工具
├── README.md
└── package.json

启动完成后会自动打开浏览器访问 http://localhost:8000，你看到下面的页面就代表成功了。