什么是Ant Design?
Ant Design是蚂蚁金服体验技术部经过大量的项目实践和总结,沉淀出设计语言 ,这但并不是单纯的设计语言,设计原则、控件规范和视觉尺寸,它还配套有前端代码实现方案。也就是说采用Ant Design后,UI设计和前端界面研发可同步完成,效率大大提升。目前有多家公司例如:阿里、美团、滴滴、简书采用。
Ant Design的官网: ant.design/index-cn\
如何引用Ant Design?
1.首先拥有一个React项目
运用官网的命令创建一个react项目 react.docschina.org/tutorial/tu…
npx create-react-app my-app
使用这条命令创建一个my-app文件夹, 创建完成后会在当前目录下出现一个my-app的文件夹,进入my-app目录,运行npm run start
cd my-app
npm run start
然后你就可以在浏览器中看到默认的React的页面了
创建完成后的文件效果如下图所示:
2.在项目中安装Ant Design
npm install antd --save
引入css样式库
修改 src/App.css,在文件顶部引入 antd/dist/antd.css。
import 'antd/dist/antd.css'
进行代码测试:
效果:
现在我们已经完成了Ant Design的引用
如何使用Ant Design官网中的api
当我们完成综上所述的操作时,你离灵活运用Ant Design就只差最后一步:熟记Api
- 打开Ant Design的官网
2.点击组件,进入组件菜单页面(这里我们以button按钮为例)
点击左侧的Button选项 点击代码演示的展开代码(如下图所示)
现在你就可以复制代码到你自己的页面中
这样你就完成了Ant Design的引用与使用