什么是Ant Design？

Ant Design是蚂蚁金服体验技术部经过大量的项目实践和总结，沉淀出设计语言 ，这但并不是单纯的设计语言，设计原则、控件规范和视觉尺寸，它还配套有前端代码实现方案。也就是说采用Ant Design后，UI设计和前端界面研发可同步完成，效率大大提升。目前有多家公司例如：阿里、美团、滴滴、简书采用。

Ant Design的官网： ant.design/index-cn

如何引用Ant Design？

1.首先拥有一个React项目

运用官网的命令创建一个react项目

使用这条命令创建一个my-app文件夹， 创建完成后会在当前目录下出现一个my-app的文件夹，进入my-app目录，运行npm run start

cd my-appnpm run start

然后你就可以在浏览器中看到默认的React的页面了，创建完成后的文件效果如下图所示：

2.在项目中安装Ant Design

引入css样式库

修改 src/App.css，在文件顶部引入 antd/dist/antd.css。

进行代码测试：

效果:

现在我们已经完成了Ant Design的引用。

如何使用Ant Design官网中的api

当我们完成综上所述的操作时，你离灵活运用Ant Design就只差最后一步：熟记Api

1. 打开Ant Design的官网

2.点击组件,进入组件菜单页面（这里我们以button按钮为例）
点击左侧的Button选项 点击代码演示的展开代码（如下图所示）

现在你就可以复制代码到你自己的页面中

这样你就完成了Ant Design的引用与使用。

作者：孑律
链接：https://juejin.cn/post/7028844531776749581