001-ant design安装及快速入门【基于纯antd的基本项目搭建】
一、安装使用
1.1、安装
推荐使用 npm 或 yarn 的方式进行开发
npm install antd --save
yarn add antd
1.2、浏览器引入
在浏览器中使用 script
和 link
标签直接引入文件,并使用全局变量 antd
。
我们在 npm 发布包内的 antd/dist
目录下提供了 antd.js
antd.css
以及 antd.min.js
antd.min.css
import { DatePicker } from 'antd'; ReactDOM.render(<DatePicker />, mountNode);
引入样式
import 'antd/dist/antd.css'; // or 'antd/dist/antd.less'
1.3、按需加载
方式一、使用 babel-plugin-import(推荐)。
// .babelrc or babel-loader option {"plugins": [["import", { "libraryName": "antd", "libraryDirectory": "es", "style": "css" }] // `style: true` 会加载 less 文件 ] }
注意:webpack 1 无需设置
libraryDirectory
。
然后只需从 antd 引入模块即可,无需单独引入样式。等同于下面手动引入的方式。
// babel-plugin-import 会帮助你加载 JS 和 CSS import { DatePicker } from 'antd';
方式二、手动引入
import DatePicker from 'antd/lib/date-picker'; // 加载 JS import 'antd/lib/date-picker/style/css'; // 加载 CSS // import 'antd/lib/date-picker/style'; // 加载 LESS
二、快速入门
2.1、安装脚手架工具
antd-init 是一个用于演示 antd 如何使用的脚手架工具,实际业务项目建议使用 dva-cli 和 create-react-app 进行搭建。
npm install antd-init -g
2.2、创建一个项目
mkdir antd-demo && cd antd-demo antd-init
2.3、使用组件
直接用下面的代码替换 index.js
的内容,用 React 的方式直接使用 antd 组件。
import React from 'react'; import ReactDOM from 'react-dom'; import { LocaleProvider, DatePicker, message } from 'antd'; // 由于 antd 组件的默认文案是英文,所以需要修改为中文 import zhCN from 'antd/lib/locale-provider/zh_CN'; import moment from 'moment'; import 'moment/locale/zh-cn';moment.locale('zh-cn');class App extends React.Component {constructor(props) {super(props);this.state = {date: '',};}handleChange(date) {message.info('您选择的日期是: ' + (date ? date.toString() : ''));this.setState({ date });}render() {return (<LocaleProvider locale={zhCN}><div style={{ width: 400, margin: '100px auto' }}><DatePicker onChange={value => this.handleChange(value)} /><div style={{ marginTop: 20 }}>当前日期:{this.state.date && this.state.date.toString()}</div></div></LocaleProvider> );} }ReactDOM.render(<App />, document.getElementById('root'));
你可以在左侧菜单选用更多组件。
2.4、开发调试
一键启动调试,访问 http://127.0.0.1:8000 查看效果。
npm start
2.5、构建和部署
npm run build
三、按需加载
如果你在开发环境的控制台看到下面的提示,那么你可能使用了 import { Button } from 'antd';
的写法引入了 antd 下所有的模块,这会影响应用的网络性能。
You are using a whole package of antd, please use https://www.npmjs.com/package/babel-plugin-import to reduce app bundle size.
可以通过以下的写法来按需加载组件。
import Button from 'antd/lib/button'; import 'antd/lib/button/style'; // 或者 antd/lib/button/style/css 加载 css 文件
如果你使用了 babel,那么可以使用 babel-plugin-import 来进行按需加载,加入这个插件后。你可以仍然这么写:
import { Button } from 'antd';
插件会帮你转换成 antd/lib/xxx
的写法。另外此插件配合 style 属性可以做到模块样式的按需自动加载。
注意,babel-plugin-import 的
style
属性除了引入对应组件的样式,也会引入一些必要的全局样式。如果你不需要它们,建议不要使用此属性。你可以import 'antd/dist/antd.css
手动引入,并覆盖全局样式。
001-ant design安装及快速入门【基于纯antd的基本项目搭建】相关推荐
- Tushare介绍、安装及快速入门
Tushare介绍.安装及快速入门 Tushare是一个免费.开源的python财经数据接口包.主要实现对股票等金融数据从数据采集.清洗加工 到 数据存储的过程,能够为金融分析人员提供快速.整洁.和多 ...
- Ant Design Pro of Vue——蚂蚁金服中后台系统框架搭建
Ant Design Pro of Vue--蚂蚁金服中后台系统框架搭建 Ant Design Pro of Vue下载安装启动步骤: 一.Ant Design Pro of Vue 的介绍 Ant ...
- Docker快速入门实践-纯干货文章
Docker快速入门实践-老男孩高级架构师课程内容,如果细看还能发现讲解视频呦!小伙伴们赶紧猛戳吧! 老男孩高级架构师内部学员实践文档分享! Docker快速入门实践-纯干货文章 老男孩教育2016启 ...
- Ant Design of React从入门到开发教程
Ant Design Pro 是一个企业级中后台前端/设计解决方案. 目录: 一:开发前的准备 二:创建页面 三:创建组件并引用 四:封装网络请求和网络请求走向 五:登录流程以及路由权限设置 六:父组 ...
- Python测试框架pytest(01)简介、安装、快速入门
1.简介 pytest 是成熟的功能齐全的 Python 测试工具,可帮助你编写更好的程序. pytest 是一个使构建简单和可伸缩的测试变得容易的框架.测试具有表达性和可读性,不需要样板代码.几分钟 ...
- Kafka 安装及快速入门
转载请注明原创地址为:http://www.54tianzhisheng.cn/2018/01/04/Kafka/ 介绍 官网:http://kafka.apache.org/ Apache Kafk ...
- (快速入门深度学习)证件照生成项目
前言 通过一个可以运行的项目,快速入门深度学习,该项目通过微信小程序拍摄照片,调用后台程序上传照片,生成证件照,提供完整可运行的前后端源代码. 本项目能学习到: 1.快速了解深度学习框架的应用, 进行 ...
- 基于Django框架的sysinfo项目搭建---系统信息监控(主机名,内核版本等)
目录 主机信息监控 项目搭建 基础框架构建 首页系统信息展示完善 主机信息监控 项目搭建 详情见前篇博客 创建子应用host并且设置本地化 数据库表的创建和超级用户的创建 git管理项目(requir ...
- Docker快速安装与快速入门
一.软件版本 操作系统:Centos 7.0 二.开始安装: http://www.daocloud.io/ 由于国内的源比较卡,所以我们推荐使用daocloud的方式,注册安装即可: [root@l ...
最新文章
- 简单字符串排序_JAVA
- 一个完美网站的101项指标(转)
- 利用记录型信号量机制: wait(s), signal(s)解决进程同步问题
- PHP中的stdClass 【转】
- P1115 最大子段和(python3实现)
- 数据网站(数据集的获取)、打分网站
- console.log(12.toString())为啥会报错呢?
- CentOS桥接网卡配置
- Maven POM 浅析
- 【控制】人工势场法及人工势场函数
- 八爪鱼采集数据的一般流程
- 命名实体识别难在哪?
- 美橙互联域名转入万网 美橙互联域名转入万网
- java中逗号运算符的含义_逗号运算符什么时候有用?
- 解决android手机EditText设置光标颜色,android:textCursorDrawable=@drawable/corner_cursor 华为手机无效果的问题
- [ Linux RK ] 更改网卡名字|CSDN创作打卡
- JAVA:(游戏:四子连)
- matlab机械臂运动仿真
- 机器人将颠覆零售业,看AI在零售行业有哪些应用?
- 刀塔2国服服务器都未响应,电脑中玩dota2卡死出现无响应蓝屏红字warning:connection problem如何解决...