2021-07-19 Ant Design of React 初体验

Ant Design of React 初体验

antd是基于 Ant Design 设计体系的 React UI 组件库，主要用于研发企业级中后台产品。安装与运行需要Node.js环境的支持。

1. Node.js安装

下载Node.js 14.17.3 LTS，选左边的稳定版本，下载速度极其缓慢，故百度发现有Node.js 中文网。
安装过程一路确定，没什么好说的。
完成后，打开cmd，输入node -v查看版本。
如果如下图所示，即安装成功。

输入npm config set registry http://registry.npm.taobao.org/配置国内镜像。

2. Ant Design安装与Demo

推荐使用 npm 方式进行安装，因为node.js自带npm工具。
稳定版：

$ npm install antd --save

开发版：

$ npm install antd@beta --save

创建并打开demo目录：

$ mkdir antd-demo && cd antd-demo

下载并初始化demo：

$ antd-init

启动这个demo：

$ npm start

如下所示，demo运行在8000端口上。

访问http://127.0.0.1:8000/就能查看这个demo啦！

3. yarn 的安装

Yarn是facebook发布的一款取代npm的包管理工具。早晚得用

• 下载速度快
  • Yarn 缓存了每个下载过的包，所以再次使用时无需重复下载。
• 安全性高
  • 在执行代码之前，Yarn 会通过算法校验每个安装包的完整性。
• 兼容性强
  • Yarn 能够保证在不同操作系统的兼容性。

下载yarn：

$ npm install -g yarn

查看版本:

$ yarn --version

安装成功如下图所示：

国内镜像配置：

$ yarn config set registry https://registry.npm.taobao.org -g
$ yarn config set sass_binary_site http://cdn.npm.taobao.org/dist/node-sass -g