Ant-design-pro-环境搭建

wellknow

前期准备
安装node、git (自行百度)
. ^% w( G5 D& X6 _) z% x>node -v
  v16.20.2

安装
从github仓库中直接安装最新的脚手架代码
  I. b) M. x  }( `. [3 T

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

复制代码

$ E: G5 m% O6 B2 s/ d& l
- C! s: k  C3 e+ a4 O8 _0 @3 |  T目录结构

├── config                   # umi 配置，包含路由，构建等配置
! }% C3 m. c1 _6 E7 i├── mock                     # 本地模拟数据
├── public
! }0 J! ?7 g) I" h# y* v0 Y│   └── favicon.png          # Favicon
3 G( Y* G4 E' w, |├── src
│   ├── assets               # 本地静态资源
& {  k; d& j' M' @│   ├── components           # 业务通用组件
│   ├── e2e                  # 集成测试用例
! H# y9 e  f5 h* ]5 f  O│   ├── layouts              # 通用布局
│   ├── models               # 全局 dva model
. X  r  Y; N, j' _: `& @│   ├── pages                # 业务页面入口和常用模板
8 f1 N( }( W5 l# f1 t' S│   ├── services             # 后台接口服务
; P% t8 |6 V, L! \7 ?$ l( @, g│   ├── utils                # 工具库
  u/ g. n; `! J, w. O. F│   ├── locales              # 国际化资源
! t% A4 O- c3 \2 l│   ├── global.less          # 全局样式
│   └── global.js            # 全局 JS
4 Y3 c) C  e1 y& v' C├── tests                    # 测试工具
9 Y# ]+ F" C+ S; h3 k├── README.md
└── package.json

0 R' w+ T* X9 `6 v% @2 D4 ?
1 E$ W: {1 F) D; ]" h本地开发
/ {: \9 g! v3 w( C! t2 [安装依赖
$ C+ l% W7 \: P6 c! I* P; D

1. npm install yarn -g
   , q0 u5 ]% S: D$ u2 Q, H1 C
2. yarn install
   / ?. R2 t( y) p( I( U
3. yarn start

复制代码

- o2 D3 k0 F: d: ^9 l
启动完成后会自动打开浏览器访问
; V' l2 q& }  `6 v$ v2 ^http://localhost:8000