本篇主要总结在react下使用Ant Design开发页面所需要的准备知识，以及如何零开始搭建一个空的antd项目。

前言

很多后端开发、测试工程师日常工作中都难免会遇到需要自己兼职写一点前端代码的。对于我们这些业余前端来说，阿里两大开源框架Element UI和Ant Design都是很好的选择。Element UI前些年更火一些，网上有很多现成的demo，然后缺点是已经停更了。所以Ant Design似乎是一个更好的选择了。

知识准备

对从来没写过前端的人来说，挑战还是很大的。以下技术就算不能精通，也大体了解下，这样才可能继续下去。（按推荐时间先后顺序排序）

html：了解基本语法，常见标签含义。
css：了解基本语法
javascript：了解基本语法。
typescript：了解基本语法。
react jsx：了解项目结构、基本语法。

环境搭建

antd官网有很详细的新手指南，但是有些地方说的不是很清晰，很容易挖坑。这里整理一下搭建环境的有效步骤。

以下操作按顺序进行

包管理工具：antd官方文档用yarn多一些。个人用npm习惯些，所以还是选择用npm。安装命令：

brew install npm
npm -v

现在最新的是6.14.8。如果后续项目出错，可以查一下是不是npm版本适配，npm修改版本方法：

npm install npm@x.x.x -g
# x.x.x替换为目标版本号

运行环境 antd是用react框架+typescript语言进行开发，要运行tpyescript项目，必然要先安装ts环境。

npm install -g typescript

项目创建 使用官方脚手架创建一个名为antd-demo-ts的react项目：

npx create-react-app antd-demo-ts --typescript
cd antd-demo-ts
npm run start

访问http://localhost:3000 可以看到react图标就是创建成功了。

引入antd 现在就可以按官方文档指引操作，首先修改src/App.tsx:

import React, { FC } from 'react';
import { Button } from 'antd';
import './App.css';

const App: FC = () => (
  <div className="App">
    <Button type="primary">Button</Button>
  </div>
);

export default App;

然后修改src/App.css，在文件顶部引入 antd 的样式：

@import '~antd/dist/antd.css';

这时再查看页面，react图标已经不见了，已经变成antd样式的的button。

至此，antd开发环境就搭建完成了。

Ant Design前端学习笔记之一——环境搭建

前言

知识准备

环境搭建