Ant-design-pro-环境搭建

wellknow

前期准备
! J' J+ G& v; F, x! w5 W7 u安装node、git (自行百度)
>node -v
  v16.20.2
. B' v/ u2 _+ ]
; W" w8 d/ ]" P7 P/ f# J安装
1 U( K: o- x: L! W, a- y" l( J从github仓库中直接安装最新的脚手架代码
% c2 c0 P' k% X. f/ b8 @$ l% Y! f! K

1. git clone --depth=1 https://github.com/ant-design/ant-design-pro.git
   # c4 k- B' a& g6 {
2. cd ant-design-pro

复制代码

目录结构

├── config                   # umi 配置，包含路由，构建等配置
3 h- ]4 D8 D2 L7 o% W. ~0 H$ ~- p├── mock                     # 本地模拟数据
- M8 C; y& k" |' s, t├── public
* d9 V1 X9 y& N- l5 Y& R│   └── favicon.png          # Favicon
! j: ?9 d' v& t/ ^  A0 s├── src
│   ├── assets               # 本地静态资源
│   ├── components           # 业务通用组件
/ w1 U$ I+ ?& K6 z& \( R│   ├── e2e                  # 集成测试用例
│   ├── layouts              # 通用布局
! G3 ~) ], T! \- i3 |│   ├── models               # 全局 dva model
│   ├── pages                # 业务页面入口和常用模板
│   ├── services             # 后台接口服务
│   ├── utils                # 工具库
0 {# I- B" b( |# K8 I- A│   ├── locales              # 国际化资源
│   ├── global.less          # 全局样式
│   └── global.js            # 全局 JS
1 Q& n/ i1 v- Y$ g. o% d3 I* t├── tests                    # 测试工具
├── README.md
9 f# t' Y( ?1 u6 m6 G└── package.json

1 K/ D2 |' h0 a# l. E% O
本地开发
安装依赖

1. npm install yarn -g
   
2. yarn install
   & _" f7 A" s( ?" p! b- c& ?* g
3. yarn start

复制代码

启动完成后会自动打开浏览器访问
http://localhost:8000