Ant-design-pro-环境搭建

wellknow

前期准备
安装node、git (自行百度)
- |1 o% j1 \( g1 Z+ Y>node -v
& F' z! |  t3 O# A, R  v16.20.2

- L+ G* O/ U( I! H3 _( y安装
. v# q- i- F; U9 g* z# _; O$ @从github仓库中直接安装最新的脚手架代码

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

复制代码

4 P- b4 W! @( r, [6 S  R0 k
! y) m* {$ x" F, J2 u& r/ y4 {目录结构

├── config                   # umi 配置，包含路由，构建等配置
├── mock                     # 本地模拟数据
├── public
│   └── favicon.png          # Favicon
; a* P# L) {- z% r+ Z├── src
: _# e- d* I$ q% U4 B│   ├── assets               # 本地静态资源
/ x' H$ ^, {  j" V+ p│   ├── components           # 业务通用组件
8 C" `% z" n7 o3 F2 j6 t│   ├── e2e                  # 集成测试用例
! ]3 e8 w1 y1 {: J$ K│   ├── layouts              # 通用布局
4 d! |* Y) r* A3 N8 T5 t6 `│   ├── models               # 全局 dva model
* r3 K/ {5 O1 D+ b6 I% |4 [│   ├── pages                # 业务页面入口和常用模板
+ S/ F' o- Y; \5 k" t│   ├── services             # 后台接口服务
. E! t3 \# f5 `3 b$ i* u" `# ?/ ?│   ├── utils                # 工具库
) V; g  V7 J; C. _│   ├── locales              # 国际化资源
│   ├── global.less          # 全局样式
$ d1 _2 H" N6 l) r3 e( I│   └── global.js            # 全局 JS
├── tests                    # 测试工具
├── README.md
└── package.json

% H+ E% x% d/ J
; }1 T% L5 T% t" p) B* @4 h本地开发
; }2 H! ]6 R. q安装依赖
5 d4 |0 y) A" t) o- C+ S

1. npm install yarn -g
   
2. yarn install
   ( ?# }" @/ R5 P+ B$ j. x' s
3. yarn start

复制代码

- E5 N, E' u: u( K  {& A
! S* P  y( v" c  c启动完成后会自动打开浏览器访问
http://localhost:8000