antdesignpro
# 使用 antDesignPro 来快速开发管理系统
到文档地址的,初始化部分进行开箱即用
我们选择ant-design-pro
、typescript
、simple
进行创建项目即可。
如果出现啥node
版本不适配的,去nodejs
官网下载更新,然后再重新使用初始化项目的相关命令。
# 安装依赖
使用webstorm
或者vscode
打开项目,出现一大片红,即代表项目依赖没有安装,我们需要进行安装依赖,
打开终端:
yarn
# or
yarn install
#or
npm install
1
2
3
4
5
6
7
2
3
4
5
6
7
yarn
是怎么知道我们要安装什么依赖的?
有一个
package.json
文件中的dependencies
内容,会识别他们进行下载。
# 运行项目
我们如何允许项目呢?
在package.json
文件中有一个scripts
内容,写了很多各种运行的方式
"scripts": {
"analyze": "cross-env ANALYZE=1 umi build",
"build": "umi build",
"deploy": "npm run build && npm run gh-pages",
"dev": "npm run start:dev",
"gh-pages": "gh-pages -d dist",
"i18n-remove": "pro i18n-remove --locale=zh-CN --write",
"postinstall": "umi g tmp",
"lint": "umi g tmp && npm run lint:js && npm run lint:style && npm run lint:prettier && npm run tsc",
"lint-staged": "lint-staged",
"lint-staged:js": "eslint --ext .js,.jsx,.ts,.tsx ",
"lint:fix": "eslint --fix --cache --ext .js,.jsx,.ts,.tsx --format=pretty ./src && npm run lint:style",
"lint:js": "eslint --cache --ext .js,.jsx,.ts,.tsx --format=pretty ./src",
"lint:prettier": "prettier -c --write \"src/**/*\" --end-of-line auto",
"lint:style": "stylelint --fix \"src/**/*.less\" --syntax less",
"openapi": "umi openapi",
"playwright": "playwright install && playwright test",
"precommit": "lint-staged",
"prettier": "prettier -c --write \"src/**/*\"",
"serve": "umi-serve",
"start": "cross-env UMI_ENV=dev umi dev",
"start:dev": "cross-env REACT_APP_ENV=dev MOCK=none UMI_ENV=dev umi dev",
"start:no-mock": "cross-env MOCK=none UMI_ENV=dev umi dev",
"start:no-ui": "cross-env UMI_UI=none UMI_ENV=dev umi dev",
"start:pre": "cross-env REACT_APP_ENV=pre UMI_ENV=dev umi dev",
"start:test": "cross-env REACT_APP_ENV=test MOCK=none UMI_ENV=dev umi dev",
"test": "umi test",
"test:component": "umi test ./src/components",
"test:e2e": "node ./tests/run-tests.js",
"tsc": "tsc --noEmit"
},
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
我们通过webstorm
点击scripts
的start
进行运行即可。然后就开始相关的编译内容。最终会有一个编译完成的链接,我们点击即可。
# 安装umi ui
工具
yarn add @umijs/preset-ui -D
1
可以帮助我们快速开发。
安装完之后,右下角会出现这个图标,可以帮我们快速生成代码。
我们可以点击模板页,进行添加页面模板
这个是一个漫长的等待的过程。机器再好,也得等它编译完。
上述主要过程,就是
git pull 一个远程的写好的代码
然后安装,编译
1
2
2
编辑 (opens new window)
上次更新: 2022/03/19, 17:47:13