为什么我选择Ant Design Pro脚手架

首先先来谈谈Ant Design Pro脚手架好处：

初始化操作简单！
启动脚手架方便！

任何一种语言和框架，满足以上两点，肯定会得到很好的推广（比较大家都想提高产品开发效率啦，嘻嘻！）

准备工作

由于国内网络和前端的特殊性，在安装依赖等方面可能会失败或导致无法启动，浪费大量的时间我们推荐如下的技术栈来帮助我们顺畅的开发。

首先我们要找到一个好用的包管理器，

Node程序包管理器

Node程序包管理器提供了两个主要功能：

它提供了可在search.nodejs.org上搜索的node.js软件包/模块的在线存储库。
它还提供了命令行实用程序，用于安装Node.js软件包，执行版本管理和Node.js软件包的依赖关系管理。

在v0.6.3之后的版本中，npm与Node.js可安装程序捆绑在一起。您可以通过打开Node.js命令提示符并键入以下命令来检查版本：（所以，安装一个node.js就方便得很）

使用npm安装模块

以下是安装任何Node.js模块的语法：

当然啦，安装node时候让我也会顺便安装一个著名的Node.js Web框架，称为express：

npm install express

为什么我选择Ant Design Pro脚手架

呐！这个是官网首页上的文字，快速，开放，极简化的web开发框架。

全局安装与本地安装

默认情况下，npm在本地模式下安装依赖项。在此，本地模式指定存在Node应用程序的文件夹。例如，如果您安装了Express模块，它将在安装Express模块的当前目录中创建node_modules目录。

您可以使用npm ls命令列出所有本地安装的模块。

打开Node.js命令提示符并执行npm ls。

ls就是查看当前，当然啦，你也可以自行了解一下ls与LL的区别。

全局安装的软件包/依赖关系存储在系统目录中。让我们使用全局安装来安装Express模块。尽管也会产生相同的结果，但是模块将在全局安装。

打开Node.js命令提示符并执行以下代码：

npm install express -g

卸载模块

如果我不想使用这个框架，当然啦，你也可以进行卸载。

要卸载Node.js模块，请使用以下命令：

npm uninstall express

搜索模块

npm search express命令用于搜索Express或其他模块。
npm search express

当然啦，官方是推荐使用 tyarn 来进行包管理，这样可以极大地减少 install 的时间和失败的概率，并且完全兼容 npm。

如果喜欢使用 npm 而不是 yarn，可以使用 cnpm, 安装速度比 tyarn 更快，但是与 npm 不是完全兼容。

Terminal

非 windows 用户没什么好说的，iTrem2 和 my zsh 是最强选择。

对于 windows 用户而言，bash on linux 是最好的选择，但是可能会造成一些性能问题。这里推荐使用 Windows Terminal 和 Powershell。Windows Terminal 可以直接在微软商店中下载，美貌与实力并存，不逊于 iTrem2，微软官方维护品质也值得信赖。Powershell 是 window7 以来内置的命令行工具，被 linux 常使人称赞为不那么烂的命令行。并且可以配置 posh-git ,能的到部分 zsh 的能力。

配置好后效果

为什么我选择Ant Design Pro脚手架

提供了 create umi 来快速的初始化脚手架。

# 使用 npm
npx create umi
# 使用 yarn
yarn create umi

create umi 提供了丰富的选项来满足不同用户的脚手架需求，我们可以选择开发语言 JavaScript

也可以选择是否获取全部区块。

complete

脚手架初始化成功之后就可以开始进行开发了

start

npm和yarn 根据实际情况来启动。

要想尽快上手，最直接的办法就是看代码了。

为什么我选择Ant Design Pro脚手架

你要先知道，数据流向是怎样的，然后再理解项目，再进行项目入手。不然知识不成体系，那将不成体统。

看到 login/login , 这是react-router组件跳转的方式，payload是参数，这里的login/login跳转到哪里？前边的login代表着model，也就是src/models目录下的models。

handleSubmit = (err, values) => {
  const { type } = this.state;
  const { dispatch } = this.props;
  if (!err) {
    dispatch({
      type: 'login/login',
      payload: {
        ...values,
        type,
      },
    });
  }
};

具体是怎么关联的呢？在src/common目录下的router.js文件中设置：

'/user/login': {
component: dynamicWrapper(app, ['login'], () => import('../routes/User/Login')),

接下来是models 目录下对应的那个js文件

为什么我选择Ant Design Pro脚手架

组件间数据的流向就跟清楚了，要想明白具体是怎么实现的请先学习 react,react-router ,redux

学完这些，上边的流程自然就能明白是啥意思了。

为什么我选择Ant Design Pro脚手架

对了，具体path路径是在这里，有专门的的config.js文件夹。

剩下的就是怎么获取后台数据了，

const response = yield call(fakeAccountLogin, payload); 
 使用call（function，param）和获取后台数据，
 fakeAccountLogin是方法，定义在service文件夹下

简单的export是这样的：

export async function fakeAccountLogin(params) {
  return request('/api/login/account', {
    method: 'POST',
    body: params,
  });
}

ant design pro 采用dva框架进行管理，所有你要到根目录找到mock 文件，看到：

POST /api/login/account': (req, res) => {
 //
}

这个是放API的地方。

最后单页面展示是这样的。

这样，我们就简单的完成了利用Ant Design Pro脚手架来构建一个前端表单页面。

为什么我选择Ant Design Pro脚手架

## 不要去鄙视别人索取时的贪婪，因为最应该被鄙视的是不肯分享时的吝啬。

（偶尔一点小小打赏也是对创作者的激励，打赏机制个人认为这个肯定是自愿原则，谢谢！点个赞也是对作者的奖励，不啦不啦，嘿嘿。）

每天一句中文式外语

日语

爱してる（阿姨洗铁路）　 我爱你
さようなら（撒油拉拉） 再见
こんにちは（恐你骑娃） 你好
だいじょうぶ（大衣胶布） 没关系
忘れないけど（我死啦那你开刀） 勿忘我
くどうしんいち（滚筒洗衣机） 工藤新一
おはよう（哦哈哟） 早上好
ありがとう（阿丽牙多） 谢谢
ただいま（他大姨妈） 我回来了
にほんご（你哄哥） 日语
まだまだ （马达马达） 你还差了点儿
そうが （索噶） 这样啊！！
ばか （八嘎） 傻必
なに （哪里） 什么
よかった（有卡大） 太好了

はじめまして，どうぞよろしくおねがいします
（哈机梅妈西忒,豆揍有楼西骷呕内旮一喜妈死）
初级见面，请多指教

为什么我选择Ant Design Pro脚手架