Ant-design-pro-环境搭建

wellknow

前期准备
# v' R4 o* R/ ?! s, J- k安装node、git (自行百度)
. S: [2 L: S4 L3 }>node -v
  v16.20.2

/ L6 [2 {# U( v2 C安装
从github仓库中直接安装最新的脚手架代码

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

复制代码

, L! Z& ~$ w: y7 v) n
目录结构
- l" K4 X2 R, _# J' G

├── config                   # umi 配置，包含路由，构建等配置
├── mock                     # 本地模拟数据
. T* i+ u( j( d% c7 C5 A+ y; s├── public
│   └── favicon.png          # Favicon
├── src
( ~- g! d5 ], G, D$ z- B│   ├── assets               # 本地静态资源
$ b' C$ J% Z3 N! Y' ]2 z│   ├── components           # 业务通用组件
% Y$ H" o+ A7 I0 W. X3 S│   ├── e2e                  # 集成测试用例
│   ├── layouts              # 通用布局
│   ├── models               # 全局 dva model
│   ├── pages                # 业务页面入口和常用模板
. S4 A3 X% G$ H/ K' k) Y│   ├── services             # 后台接口服务
8 Z; i& `6 I- X$ T7 g$ T: a  u│   ├── utils                # 工具库
│   ├── locales              # 国际化资源
! [- _4 s9 U$ o1 i, B% K6 [│   ├── global.less          # 全局样式
9 E8 Z: }( S1 ?+ \0 x0 y& H4 f0 X│   └── global.js            # 全局 JS
% q9 d, }; g' @1 m( z  Q├── tests                    # 测试工具
' I2 |6 g1 T5 _- b$ S: Y$ X├── README.md
1 h& A; Y9 x! ?9 y6 f+ P4 D9 o└── package.json

5 {! S) F" y1 h4 R3 m本地开发
( v; E$ K9 s+ m) p2 x$ }: K安装依赖
+ K) @" Y7 P* c) T+ x9 k; ?

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

复制代码

启动完成后会自动打开浏览器访问
. o7 _0 B0 Q) Q/ uhttp://localhost:8000