基于Ant Design UI框架的React项目

一直做后端，但是随着前端框架的更新迭代，索性花几天时间接触一下。做一个整理。（前端大佬请无视- -！）

环境搭建

一、什么是npm和cnpm

npm（node package manager）：nodejs的包管理器，用于node插件管理（包括安装、卸载、管理依赖等） 
cnpm:因为npm安装插件是从国外服务器下载，受网络的影响比较大，可能会出现异常，如果npm的服务器在中国就好了，所以我们乐于分享的淘宝团队干了这事。来自官网：“这是一个完整 npmjs.org 镜像，你可以用此代替官方版本(只读)，同步频率目前为 10分钟 一次以保证尽量与官方服务同步。

二、安装nodejs

1、nodejs官网下载nodejs 

2、选择windows版本，躺答试安装0.0

3、校验安装结果

node -v

 

 三、配置环境变量

1、首先配置npm的全局模块的存放路径、cache的路径，（建议安装到nodejs的安装目录）
输入如下命令：

npm config set prefix "E:\nodejs\node_global"
npm config set cache"E:\nodejs\node_cache"

配置完成后可以在文件夹中看到相应名字的文件夹如下： 

 2、配置系统环境变量：

3、在命令行输入以下命令安装express（注：“-g”表示安装到global目录下，就是上面设置的node_global中）

npm install express -g

可以看到node_global/node_modules下有express

4、在命令行输入node进入编辑模式，输入以下代码检测是否能正常加载模块：

require('express')

如果成功，如上图显示；如果出错，检测下上面配置的NODE_PATH是否配置或者配置正确。

 四、安装cnpm

1、安装cnpm，输入以下命令：

npm install -g cnpm --registry=https://registry.npm.taobao.org

淡定的等下去把 - -！！！

2、输入cnpm -v ，检测是否正常，但是这里会报错。

3、添加系统变量path的内容 
因为cnpm会被安装到D:\Program Files\nodejs\node_global下，而系统变量path并未包含该路径。在系统变量path下添加该路径即可正常使用cnpm。 
如图，修改系统变量path： 

然后测试cnpm -v ，结果如下：

---

 创建react项目

git自行安装啦，没什么说的。

一、全局安装create-react-app脚手架

npm install -g create-react-app yarn

等.....淡定....

二、创建React项目antd-demo

create-react-app antd-demo1

依然很慢，等到出现如下：

三、引入Ant Design组件库

先切入项目目录

yarn add antd

等待成功。

四、项目启动

先切入项目目录

npm start

项目地址会在控制台中展示。

---

Over。