Ant-design-pro-环境搭建

wellknow

前期准备
安装node、git (自行百度)
; d9 Z5 C- X$ b& r7 U6 `$ T>node -v
6 C. t. ]- x8 X0 j% G  v16.20.2
4 b9 y+ C5 C, Q, ?( W" g- O/ O( J
安装
7 N' K) N: N& @从github仓库中直接安装最新的脚手架代码

1. git clone --depth=1 https://github.com/ant-design/ant-design-pro.git
   8 D9 C- ?' G. x5 s# v$ H- \
2. cd ant-design-pro

复制代码

4 C8 X2 D2 A" P1 k' W+ W, R3 L
: \1 g# ^9 y- R; e3 N4 Q4 |目录结构

├── config                   # umi 配置，包含路由，构建等配置
9 P& `5 a; G. f├── mock                     # 本地模拟数据
9 H+ _2 J$ H# {, \├── public
│   └── favicon.png          # Favicon
: F/ Y- H$ R6 G' k3 [├── src
; i8 S( F$ N3 V, {6 j1 w│   ├── assets               # 本地静态资源
4 M1 p6 H" W9 W% h% H$ ^, O│   ├── components           # 业务通用组件
3 G: d) g' W3 }0 l' v│   ├── e2e                  # 集成测试用例
│   ├── layouts              # 通用布局
! F* m8 ]" v1 b/ S7 h/ e1 t│   ├── models               # 全局 dva model
/ X% g6 X: V. M+ P+ Y3 \5 L│   ├── pages                # 业务页面入口和常用模板
6 i+ Q9 ^" F/ O! Y* [│   ├── services             # 后台接口服务
6 G- \, x/ }2 a│   ├── utils                # 工具库
│   ├── locales              # 国际化资源
│   ├── global.less          # 全局样式
│   └── global.js            # 全局 JS
├── tests                    # 测试工具
: g' `  f3 W: l9 ~( ^9 a├── README.md
( j- |3 [- u4 L. k3 f9 \└── package.json

3 }1 C) u# B: @  ^( L
本地开发
' z) U. Z  ]. G安装依赖
! M% x3 l2 I7 P8 Z  D( U

1. npm install yarn -g
   
2. yarn install
   
3. yarn start

复制代码

% W1 x: X; e# g& O7 ^' O) Z
启动完成后会自动打开浏览器访问
http://localhost:8000