Ant-design-pro-环境搭建

wellknow

前期准备
: n$ w2 k+ F( l" z7 x+ W/ ~. h安装node、git (自行百度)
>node -v
  v16.20.2

5 [6 o5 O4 m& D1 u" h7 G( r9 g安装
) R( z; `+ V& [! O* H. W8 ?从github仓库中直接安装最新的脚手架代码

1. git clone --depth=1 https://github.com/ant-design/ant-design-pro.git
   1 f" M3 _1 ^$ x# G( K' Q9 ^1 V  H
2. cd ant-design-pro

复制代码

目录结构
. W$ z9 y& \4 E: h4 l

├── config                   # umi 配置，包含路由，构建等配置
: T6 i. F( J& n  {( I├── mock                     # 本地模拟数据
├── public
0 Z& A% i5 W/ c1 G│   └── favicon.png          # Favicon
├── src
3 o. C6 K6 e( z9 L( J5 K2 ]1 O│   ├── assets               # 本地静态资源
# ~% r  W/ ~/ ^* `1 R' u" V│   ├── components           # 业务通用组件
│   ├── e2e                  # 集成测试用例
7 d, A; e; T9 F1 S│   ├── layouts              # 通用布局
! @( M9 z: a& b* L8 n│   ├── models               # 全局 dva model
│   ├── pages                # 业务页面入口和常用模板
│   ├── services             # 后台接口服务
│   ├── utils                # 工具库
; G/ y- H! d8 M4 c│   ├── locales              # 国际化资源
8 a6 }# h' A$ `" z7 G! X3 }5 k* J│   ├── global.less          # 全局样式
( a0 G* d% _( j( s0 l! _* r│   └── global.js            # 全局 JS
├── tests                    # 测试工具
├── README.md
└── package.json

本地开发
安装依赖
  q3 a/ e. Q/ \3 I7 o5 \1 ~

1. npm install yarn -g
   . j# O6 f) Y2 m- i" c- m
2. yarn install
   
3. yarn start

复制代码

% o7 x5 w9 S( A: D$ H: c
启动完成后会自动打开浏览器访问
2 T; f8 D, P+ _! E8 xhttp://localhost:8000