Ant-design-pro-环境搭建

wellknow

前期准备
6 ?( K! E9 ^4 e8 r3 L$ B) F) c安装node、git (自行百度)
>node -v
  v16.20.2
0 P. c/ c" j: b' x
% c9 B$ [8 w* D) |6 C; W安装
从github仓库中直接安装最新的脚手架代码

1. git clone --depth=1 https://github.com/ant-design/ant-design-pro.git
   + }8 k" o3 v' q0 m  F! r
2. cd ant-design-pro

复制代码

0 @7 ~) T9 x8 D$ k; h9 |目录结构

├── config                   # umi 配置，包含路由，构建等配置
* O" ?6 X: i9 T% B" K- s├── mock                     # 本地模拟数据
├── public
+ q: Y3 r% ?$ }8 d) P/ ?+ o/ n- s│   └── favicon.png          # Favicon
├── src
│   ├── assets               # 本地静态资源
- p& i0 r  X0 O│   ├── components           # 业务通用组件
+ L" z% T. @: s  K+ O│   ├── e2e                  # 集成测试用例
│   ├── layouts              # 通用布局
│   ├── models               # 全局 dva model
% H1 n/ ]5 r# O! \! c# |│   ├── pages                # 业务页面入口和常用模板
2 Z4 r' w; W+ o9 ?( [│   ├── services             # 后台接口服务
│   ├── utils                # 工具库
│   ├── locales              # 国际化资源
│   ├── global.less          # 全局样式
│   └── global.js            # 全局 JS
* }  N4 N' [5 o7 b( c' R  ?0 S7 W├── tests                    # 测试工具
├── README.md
. `: Z& g9 a8 A6 o% {" p+ h" u└── package.json

本地开发
* W# b6 x% B" y  M安装依赖

1. npm install yarn -g
   
2. yarn install
   & v+ r5 y& g' ~) R
3. yarn start

复制代码

# D) F' C: c7 j* @/ s& D
2 E. u$ T) t1 K2 V: H. o- ?6 a6 z启动完成后会自动打开浏览器访问
7 s: C, Z* U4 |% A* Y# {http://localhost:8000