地址：https://ant.design

Ant Design of React

1. 基本概念

antd 是基于 Ant Design 设计体系的 React UI 组件库，主要用于研发企业级中后台产品。

✨ 特性#

• 🌈 提炼自企业级中后台产品的交互语言和视觉风格。
• 📦 开箱即用的高质量 React 组件。
• 🛡 使用 TypeScript 开发，提供完整的类型定义文件。
• ⚙️ 全链路开发和设计工具体系。
• 🌍 数十个国际化语言支持。
• 🎨 深入每个细节的主题定制能力。

2. 安装

使用 npm 或 yarn 安装

我们推荐使用 npm 或 yarn 的方式进行开发，不仅可在开发环境轻松调试，也可放心地在生产环境打包部署使用，享受整个生态圈和工具链带来的诸多好处。

create-react-app myadmin ---------------创建项目myadmin

npm install antd --save
//或者 yarn add antd

如果你的网络环境不佳，推荐使用 cnpm。

a. 其他需要安装的插件

mockjs 模拟数据
npm i mockjs -D 安装

axios ajax请求 安装
npm i axios -S

npm install --save react-router-dom 安装路由

npm i redux -S
npm i react-redux -S

b. VS插件推荐

Antd Rush 自动导入 api提示
Ant Design Snippets 代码提示

c. 具体安装步骤

cd / 切换到根目录
create-react-app myadmin 创建myadmin项目
cd myadmin 切换到项目目录
npm i antd axios -S 安装antd 和axios 产品环境依赖
npm install --save react-router-dom 安装路由
npm i babel-plugin-import mockjs -D
安装按需加载 模拟数据包 开发环境依赖
npm run start 启动项目距

引入样式：

import 'antd/dist/antd.css'; // or 'antd/dist/antd.less'

3. 按需加载

注意：antd 默认支持基于 ES module 的 tree shaking，不使用以下插件也会有按需加载的效果。

下面两种方式都可以只加载用到的组件。

• 使用 babel-plugin-import（推荐）。

  // .babelrc or babel-loader option
  {
    "plugins": [
      ["import", {
        "libraryName": "antd",
        "libraryDirectory": "es",
        "style": "css" // `style: true` 会加载 less 文件
      }]
    ]
  }
  

  然后只需从 antd 引入模块即可，无需单独引入样式。等同于下面手动引入的方式。

  // babel-plugin-import 会帮助你加载 JS 和 CSS
  import { DatePicker } from 'antd';
  

• 手动引入

  import DatePicker from 'antd/es/date-picker'; // 加载 JS
  import 'antd/es/date-picker/style/css'; // 加载 CSS
  // import 'antd/es/date-picker/style';         // 加载 LESS