前序准备(来自官网说明)
你的本地环境需要安装 yarn、node 和 git。我们的技术栈基于 ES2015+、React、UmiJS、dva、g2 和 antd,提前了解和学习这些知识会非常有帮助。
我的本地环境:git、node、npm、yarn
安装步骤
1、yarn添加umi
yarn global add umi
2、安装
2.1 新建一个空的文件夹作为项目目录,在目录下执行
yarn create umi
2.2 选择 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.
2.3选择JavaScript
TypeScript
❯ JavaScript
2.4选择proV4
proV5
❯proV4
2.5选择complete完整安装,类似于Preview
simple
❯complete
Ant Design Pro 脚手架将会自动安装。
针对V5,要获取所有区块,需输入命令,adp官方github的issue
yarn run pro fetch-blocks --branch=v5
3、初始化
yarn
4、运行
yarn start
5、目录结构(来自官网说明)
我们已经为你生成了一个完整的开发框架,提供了涵盖中后台开发的各类功能和坑位,下面是整个项目的目录结构。
├── 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
[5]:https://github.com/ant-design/ant-design-pro/issues/6753