使用ANTD前端开发——开发环境搭建（Windows）

使用ANTD前端开发——开发环境搭建（Windows）

0. 说明

使用ANTD（ant design）开发需要安装Node.JS，cnpm，tyarn，umi等包。yarn是npm的替代品，正如tyarn取代cnpm。在未来的项目中我们会使用tyarn进行JS的包管理。

• cnpm：npm的国内镜像，提升安装速度。
• tyarn：yarn的淘宝镜像，提升安装速度。
• umi：基于Reactjs的前端框架

1. 安装Node.JS 下载地址

Node.JS安装成功后，在安装路径下有npm命令脚本。npm是Node.JS的包管理器，可以使用npm命令安装各种所需的包。但由于npm包的默认安装源在国外，速度慢，因此需将安装源映射在国内。需要安装cnpm和tyarn。

2. 安装cnpm，yarn，tyarn

• 安装cnpm，打开CMD，输入：

npm install -g cnpm --registry=https://registry.npm.taobao.org
// 安装cnpm，镜像为淘宝的npm

如果输入npm提示 "不是内部或外部命令，也不是可运行的程序或批处理文件。", 需要将Node.JS的安装路径添加到环境变量中。

Path="C:\Program Files\nodejs"

• 安装yarn，CMD中输入：

npm i yarn -g
// i: install
// -g :全局安装

查看yarn安装路径，输入：

yarn global bin
// C:\Users\Kirk\AppData\Local\Yarn\bin

将路径添加到windows环境变量

Path="C:\Users\Kirk\AppData\Local\Yarn\bin"

• 安装tyarn

在cmd中输入：

cnpm i yarn tyarn -g
// 安装tyarn，可以看到tyarn使用的是淘宝镜像，速度快

查看tyarn版本

tyarn -v

tyarn初始化

tyarn init -y

3. 安装umi

在cmd中输入：

tyarn global add umi

查看umi版本

tyarn -v