面面观 | 学习使用 Ant Design 框架

Posted 2021-04-24 极客脑司机

1，关于Ant Design

Ant Design 是蚂蚁金服开发和正在使用的一套企业级的前端设计语言和基于 React 的前端框架实现。蚂蚁金服，阿里巴巴，口碑，新美大（美团和大众点评合并的公司），滴滴都在用。

是一个组件很丰富的框架。react只是一个组件引擎，而ant design 是一个完整的组件框架，关系类似 jquery 和 juqeryUI 的关系。

https://ant.design/

https://github.com/ant-design/ant-design/

说明使用的人还是非常的多的。超级赞。

2，组件使用

组件还是非常丰富的，从开发文档中就可以看出。当然还有中文的文档。

https://ant.design/docs/react/introduce-cn

第一个demo 使用docker镜像：

FROM docker.io/node:6-alpine

 

RUN echo -e "http://mirrors.aliyun.com/alpine/v3.4/main\n\

http://mirrors.aliyun.com/alpine/v3.4/community" > /etc/apk/repositories

 

#set timezone

RUN apk update && apk add tzdata ca-certificates bash && \

    ln -sf /usr/share/zoneinfo/Asia/Shanghai /etc/localtime && \

    echo "Asia/Shanghai" > /etc/timezone && \

    rm -rf /root/.cache

 

RUN npm install -g cnpm --registry=https://registry.npm.taobao.org && \

    cnpm install antd-init -g

构建：

docker build -t demo/node-ant-design:latest .

然后启动新镜像：绑定端口和目录卷

docker run -itd --name ant-design -p 8000:8000 -v ~/ant-design:/data demo/node-ant-design:latest

启动docker镜像：

docker exec -it ant-design sh

3，创建项目

mkdir antd-demo && cd antd-demo

antd-init --type plain-react

npm start

这个时候就会创建一个antd的项目，服务会启动到8000 端口。

会自动生成

Write ./gitignore

Write ./index.css

Write ./index.html

Write ./index.js

Write ./package.json

Write ./webpack.config.js

偶尔会出现超时的问题 ，多实验几次就好了。 作为一个demo，默认的是个日历组件。 https://ant.design/components/button-cn/ 其他的组件，只要import 就可以使用了。

其他的组件：

还有表单的验证都有了。非常丰富

4，总结

react + ant-design 是非常好的组合。后端的同学可以直接写js画出一个好看的界面了。 组件都很全面，能想到的都有。非常的好看。 使用起来也非常方便。