Ant-design-pro-环境搭建

wellknow · 发表于 2023-8-11 10:51:08

前期准备
安装node、git (自行百度)
>node -v
v16.20.2

安装
从github仓库中直接安装最新的脚手架代码

git clone --depth=1 https://github.com/ant-design/ant-design-pro.git
; j- t$ E8 k' M
cd ant-design-pro

复制代码

目录结构

├── config                # umi 配置，包含路由，构建等配置
3 W, o% v' g9 m9 \3 ]├── mock                   # 本地模拟数据
2 g+ R: ?; ]$ w' c, K├── public
0 J( ]9 c  `1 E! p, V│ └── favicon.png       # Favicon7 j: O, {' o- n( s1 b8 ?+ k& {
├── src" p" A$ f$ K, s* @$ E" f5 ]+ y
│ ├── assets             # 本地静态资源
* n9 E- i8 O9 m0 d1 R│ ├── components          # 业务通用组件
% K" f$ Q+ [( i: Y( G" R' j│ ├── e2e                # 集成测试用例3 a7 v  `6 ]/ L+ \( O
│ ├── layouts             # 通用布局6 X& M) p  z( z  n" K
│ ├── models             # 全局 dva model
2 {9 {7 m0 P0 T│ ├── pages             # 业务页面入口和常用模板! J! _6 @$ l  {
│ ├── services          # 后台接口服务& r/ h) Y3 g& n: i0 k
│ ├── utils             # 工具库+ z, V/ p3 I# x; Z
│ ├── locales             # 国际化资源+ g9 m- [9 j% C5 {& F( A
│ ├── global.less       # 全局样式0 J( o4 o' x% c0 z9 g+ H5 G
│ └── global.js          # 全局 JS. L; ^3 ^  ?0 H) E/ w
├── tests                   # 测试工具) E$ W3 M) u' t( E
├── README.md* M& T; {; J2 g$ }+ S8 m  \/ ]
└── package.json

本地开发
安装依赖

npm install yarn -g+ r) g4 b9 K6 H0 i# `* k& X
yarn install* o2 P: e1 Z& y$ Z' ]$ K
yarn start

复制代码

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

		自动登录	找回密码
密码			立即注册