Ant-design-pro-环境搭建

wellknow

前期准备
安装node、git (自行百度)
' K7 k9 C6 R- I' x& W& G+ ~>node -v
  v16.20.2

安装
4 E' v) z/ p' V- s3 Y! E从github仓库中直接安装最新的脚手架代码
, k" t) @  o8 ^+ D/ ^! j

1. git clone --depth=1 https://github.com/ant-design/ant-design-pro.git
   5 c2 L7 ^. d' [: l! g/ t& n
2. cd ant-design-pro

复制代码

0 @# W+ T+ z( u/ l% C* p3 h
目录结构

├── config                   # umi 配置，包含路由，构建等配置
├── mock                     # 本地模拟数据
, y+ ]/ v5 W) X1 o8 @' W├── public
│   └── favicon.png          # Favicon
2 m9 q8 ?/ a! S( y3 N* Z├── src
│   ├── assets               # 本地静态资源
│   ├── components           # 业务通用组件
│   ├── e2e                  # 集成测试用例
. n/ a; e9 M1 j% G  X- q3 V│   ├── layouts              # 通用布局
, ]% e$ U1 l- `( {0 }0 h│   ├── models               # 全局 dva model
│   ├── pages                # 业务页面入口和常用模板
! N( F0 G" B8 [9 k+ N0 p4 l% W│   ├── services             # 后台接口服务
│   ├── utils                # 工具库
+ m3 e/ Z! z. S4 }" R! R+ y│   ├── locales              # 国际化资源
! ?; n' c3 U2 M│   ├── global.less          # 全局样式
7 g/ {9 ]% ^: @0 f; v0 j2 @. h│   └── global.js            # 全局 JS
: Y& p, e9 L  |/ A% d3 K) M├── tests                    # 测试工具
├── README.md
) S+ H9 v3 y$ s0 }  ?8 y└── package.json

, N) f! k% ^4 [# Y
本地开发
, Y, _) w% T4 \, Y安装依赖
, D% `% Q* c. w, y( i

1. npm install yarn -g
   - k; ]4 y" B8 W
2. yarn install
   
3. yarn start

复制代码

启动完成后会自动打开浏览器访问
/ _  a+ @: ?/ Q* }9 Y) @http://localhost:8000