nodejs(3):使用 Ant Design 开发web项目
来源:互联网 发布:js获得窗口宽度 编辑:程序博客网 时间:2024/06/07 03:26
本文的原文连接是: http://blog.csdn.net/freewebsys/article/details/77644929 未经博主允许不得转载。
博主地址是:http://blog.csdn.net/freewebsys
1,关于Ant Design
Ant Design 是蚂蚁金服开发和正在使用的一套企业级的前端设计语言和基于 React 的前端框架实现。蚂蚁金服,阿里巴巴,口碑,新美大(美团和大众点评合并的公司),滴滴都在用。
是一个组件很丰富的框架。react只是一个组件引擎,而ant design 是一个完整的组件框架,关系类似 jquery 和 juqeryUI 的关系。
项目地址:
https://ant.design/
最新的版本是2.12.7 github项目地址:(有1.6W的星)
https://github.com/ant-design/ant-design/
说明使用的人还是非常的多的。超级赞。
2,组件使用
组件还是非常丰富的,从开发文档中就可以看出。当然还有中文的文档。
https://ant.design/docs/react/introduce-cn
第一个demo 使用docker镜像:
FROM docker.io/node:6-alpineRUN echo -e "http://mirrors.aliyun.com/alpine/v3.4/main\n\http://mirrors.aliyun.com/alpine/v3.4/community" > /etc/apk/repositories#set timezoneRUN 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/.cacheRUN 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-demoantd-init --type plain-reactnpm start
这个时候就会创建一个antd的项目,服务会启动到8000 端口。
会自动生成
Write ./gitignoreWrite ./index.cssWrite ./index.htmlWrite ./index.jsWrite ./package.jsonWrite ./webpack.config.js
偶尔会出现超时的问题 ,多实验几次就好了。
作为一个demo,默认的是个日历组件。
https://ant.design/components/button-cn/
其他的组件,只要import 就可以使用了。
4,总结
react + ant-design 是非常好的组合。后端的同学可以直接写js画出一个好看的界面了。
组件都很全面,能想到的都有。非常的好看。
使用起来也非常方便。
本文的原文连接是: http://blog.csdn.net/freewebsys/article/details/77644929 未经博主允许不得转载。
博主地址是:http://blog.csdn.net/freewebsys
- nodejs(3):使用 Ant Design 开发web项目
- 使用ant构建web项目
- 评价 Ant Design项目
- 使用Nodejs进行web开发
- NodeJs+Angular+Mongodb Web开发(3)
- 使用Ant部署Web项目到Tomcat
- 使用ant编译发布web项目
- Ant Design Pro---项目之前
- 使用Nodejs开发web应用—1
- react项目学习笔记三(ant design)
- [ ANT ] ---------- 使用ANT协助开发java项目 (第二页)
- GitHub Ant-Design/ant-init 使用示例
- 使用ANT协助开发java项目
- 使用ANT协助开发java项目
- android开发---使用ant编译android项目
- react ant-design 使用ueditor
- ant打包web项目
- ant部署web项目
- 1006;IP判断
- nginx搭建和nginx_upstream_jvm_route安装配置
- 润乾报表V5连接mongodb数据库
- My97DatePicker日期控件在IE中页面reload后无权限
- Vue中的缩写:v-bind、v-on
- nodejs(3):使用 Ant Design 开发web项目
- Python中的生产者与消费者 实现多线程
- java提高篇(十一)-----强制类型转换
- 【学习笔记】JQuery学习笔记
- sleep和wait区别
- hitb-2017 1000levels writeup
- [转]ubuntu 安装bcompare
- 【OpenCV开发之二】图像白平衡part_one
- DPDK-IP分片和重组库