Ant design pro入坑指南

最近接到一个后台开发的项目，需要对接业务系统提取数据，大部分时间在PC上用，但是在手机上要勉强能看。对方只给了提取数据的接口，对于界面风格、布局排版等没有明确要求，只说不要太丑就可以了。

于是，开始着手选前端框架，打听了一圈，加上自己思考，最终决定前端用ant design pro，后端用SpringMVC。选ant design pro的原因如下：

1. 基础好

ant design本身设计合理、文档齐全、上手容易。ant design pro是基于ant design进一步的封装，应该也不会难用到哪去吧。

2. 省时省力

后台系统属于非主营业务开发项目，没有专职的设计和美工人员，项目开发时间短。然而，按ant design pro的封装程度，本身就已经是一个完整的后台系统了。界面布局合理、风格统一，各种需要的功能页面也一应俱全，能省不少工作量，而且符合现今主流后台系统的审美。

3. 勉强兼容手机浏览器

后台系统不仅在PC上用，还有部分手机使用场景。ant design pro的界面在手机浏览器上做了一定的适配工作，只要不是特别复杂的界面，基本上都能正常显示。

确定了框架开始安装，照着官方文档总是安装出错，于是自己总结了一下成功的安装过程。

安装环境：win10

1. 前序准备

1.1 安装yarn

安装指南（选择通过Chocolatey安装）

https://classic.yarnpkg.com/en/docs/install#windows-stable

1.1.1 安装Chocolatey

安装指南（使用windows power shell安装）

https://chocolatey.org/install

以“管理员身份”打开windows power shell，执行下面命令

Set-ExecutionPolicy Bypass -Scope Process -Force; [System.Net.ServicePointManager]::SecurityProtocol = [System.Net.ServicePointManager]::SecurityProtocol -bor 3072; iex ((New-Object System.Net.WebClient).DownloadString('https://chocolatey.org/install.ps1')) 

验证是否安装成功

PS C:\Windows\system32> choco Chocolatey v0.10.15 Please run 'choco -?' or 'choco <command> -?' for help menu. 

1.1.2 安装Node.js

安装指南

https://nodejs.org/en/

下载地址：

https://nodejs.org/dist/v12.16.1/node-v12.16.1-x64.msi

验证是否安装成功

C:\Users\username>node -v 
v12.16.1 

1.1.3 安装yarn 1.x

在windows power shell，执行下面命令

choco install yarn 

验证是否安装成功

PS C:\Users\username> yarn --version 1.22.0 

1.2 安装git

下载地址

https://git-scm.com/download/win

验证是否安装成功

C:\Users\username>git --version 
git version 2.12.2.windows.1 

2. 安装umi

2.1安装cnpm

在命令行执行下面命令

C:\Users\username>npm install -g cnpm --registry=https://registry.npm.taobao.org

返回结果：
C:\Users\username\AppData\Roaming\npm\cnpm -> C:\Users\username\AppData\Roaming\npm\node_modules\cnpm\bin\cnpm
+ cnpm@6.1.1
updated 1 package in 46.738s

2.2安装create-umi

C:\Users\username>cnpm install create-umi -g

返回结果：
Downloading create-umi to C:\Users\username\AppData\Roaming\npm\node_modules\create-umi_tmp
Copying C:\Users\username\AppData\Roaming\npm\node_modules\create-umi_tmp\_create-umi@0.21.2@create-umi to C:\Users\username\AppData\Roaming\npm\node_modules\create-umi
Installing create-umi's dependencies to C:\Users\username\AppData\Roaming\npm\node_modules\create-umi/node_modules
[1/17] mkdirp@^0.5.1 installed at node_modules\_mkdirp@0.5.5@mkdirp
[2/17] semver@^6.1.0 installed at node_modules\_semver@6.3.0@semver
[3/17] debug@^4.1.1 installed at node_modules\_debug@4.1.1@debug
[4/17] clipboardy@^2.1.0 installed at node_modules\_clipboardy@2.3.0@clipboardy
[5/17] fs-extra@^8.0.1 installed at node_modules\_fs-extra@8.1.0@fs-extra
[6/17] glob@^7.1.4 installed at node_modules\_glob@7.1.6@glob
[7/17] chalk@^2.4.2 installed at node_modules\_chalk@2.4.2@chalk
[8/17] execa@^1.0.0 installed at node_modules\_execa@1.0.0@execa
[9/17] yargs-parser@^13.1.1 installed at node_modules\_yargs-parser@13.1.2@yargs-parser
[10/17] prettier@^1.17.0 installed at node_modules\_prettier@1.19.1@prettier
[11/17] umi-utils@^1.5.2 installed at node_modules\_umi-utils@1.7.2@umi-utils
[12/17] sort-package-json@^1.22.1 installed at node_modules\_sort-package-json@1.41.0@sort-package-json
[13/17] yeoman-generator@^4.0.1 installed at node_modules\_yeoman-generator@4.8.2@yeoman-generator
[14/17] inquirer@^6.4.1 installed at node_modules\_inquirer@6.5.2@inquirer
[15/17] yeoman-environment@^2.8.0 installed at node_modules\_yeoman-environment@2.9.1@yeoman-environment
[16/17] sylvanas@^0.4.0 installed at node_modules\_sylvanas@0.4.3@sylvanas
[17/17] typescript@^3.8.3 installed at node_modules\_typescript@3.8.3@typescript
... 

2.3安装umi

执行下面命令

C:\Users\username>cnpm install umi -g

返回结果：
Downloading umi to C:\Users\username\AppData\Roaming\npm\node_modules\umi_tmp
Copying C:\Users\username\AppData\Roaming\npm\node_modules\umi_tmp\_umi@3.1.1@umi to C:\Users\username\AppData\Roaming\npm\node_modules\umi
Installing umi's dependencies to C:\Users\username\AppData\Roaming\npm\node_modules\umi/node_modules
[1/8] resolve-cwd@3.0.0 installed at node_modules\_resolve-cwd@3.0.0@resolve-cwd
[2/8] react@^16.13.1 installed at node_modules\_react@16.13.1@react
[3/8] @umijs/runtime@3.1.1 installed at node_modules\_@umijs_runtime@3.1.1@@umijs\runtime
platform unsupported @umijs/utils@3.1.1 › chokidar@3.3.1 › fsevents@~2.1.2 Package require os(darwin) not compatible with your platform(win32)
[fsevents@~2.1.2] optional install error: Package require os(darwin) not compatible with your platform(win32)
[4/8] @babel/core@7.9.0 installed at node_modules\_@babel_core@7.9.0@@babel\core
[5/8] @umijs/core@3.1.1 installed at node_modules\_@umijs_core@3.1.1@@umijs\core
[6/8] @umijs/utils@3.1.1 installed at node_modules\_@umijs_utils@3.1.1@@umijs\utils
[7/8] @umijs/types@3.1.1 installed at node_modules\_@umijs_types@3.1.1@@umijs\types
...

2.4 创建umi项目

分别选择ant-design-pro、TypeScript和Complete

e:\antdesign>cnpm create umi

返回结果：
? Select the boilerplate type ant-design-pro
?   Which language do you want to use? TypeScript
?   Do you need all the blocks or a simple scaffold? complete
>   complete mode can only use the version of antd@4
Cloning into 'create'...
remote: Enumerating objects: 573, done.
remote: Counting objects: 100% (573/573), done.
remote: Compressing objects: 100% (483/483), done.
remote: Total 573 (delta 94), reused 337 (delta 68), pack-reused 0
Receiving objects: 100% (573/573), 462.71 KiB | 277.00 KiB/s, done.
Resolving deltas: 100% (94/94), done.
Checking out files: 100% (492/492), done.
>   clone success
> Clean up...
  Copied to clipboard, just use Ctrl+V
✨ File Generate Done

2.5安装modules

e:\antdesign>cd create
e:\antdesign\create>cnpm install

返回结果：
- [25/65] Installing @babel/core@7.9.0platform unsupported umi@3.1.1 › @umijs/utils@3.1.1 › chokidar@3.3.1 › fsevents@~2.1.2 Package require os(darwin) not compatible with your platform(win32)
/ [25/65] Installing path-exists@^3.0.0[fsevents@~2.1.2] optional install error: Package require os(darwin) not compatible with your platform(win32)
- [39/65] Installing minimatch@3.0.4platform unsupported umi@3.1.1 › @umijs/preset-built-in@3.1.1 › @umijs/bundler-webpack@3.1.1 › babel-loader@8.1.0 › webpack@4.42.1 › watchpack@1.6.1 › chokidar@2.1.8 › fsevents@^1.2.7 Package require os(darwin) not compatible with your platform(win32)
- [39/65] Installing minimatch@3.0.4[fsevents@^1.2.7] optional install error: Package require os(darwin) not compatible with your platform(win32)
√ Installed 65 packages
√ Linked 1831 latest versions

2.6运行

e:\tdproj02\c\create>cnpm start

返回结果：

> ant-design-pro@1.0.0 start E:\antdproj02\create
> umi dev

  Starting Umi UI using umi@3.1.1...
  Umi UI mini Ready on port 3000.
Starting the development server...

√ Webpack
  Compiled successfully in 2.58m

[BABEL] Note: The code generator has deoptimised the styling of E:\antdproj02\create\node_modules\_@antv_data-set@0.11.4@@antv\data-set\build\data-set.js as it exceeds the max of 500KB.
[BABEL] Note: The code generator has deoptimised the styling of E:\antdproj02\create\node_modules\_mapbox-gl@1.9.1@mapbox-gl\dist\mapbox-gl.js as it exceeds the max of 500KB.
 DONE  Compiled successfully in 155017ms                                                                                                                                             22:43:05

  App running at:
  - Local:   http://localhost:8000 (copied to clipboard)
  - Network: http://192.168.56.1:8000