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的基本项目搭建】的更多相关文章
- docker安装kafka快速入门
docker安装kafka快速入门 1.安装zookeeper docker search zookeeperdocker pull zookeeperdocker run -d -v /home/s ...
- Flask简介,安装,demo,快速入门
1.Flask简介 Flask是一个相对于Django而言轻量级的Web框架. 和Django大包大揽不同,Flask建立于一系列的开源软件包之上,这其中 最主要的是WSGI应用开发库Werkzeug ...
- ant design pro超详细入门教程
1.Ant Design Pro 初了解 说到ant design pro,得先了解一下ant design是个什么东西?ant design蚂蚁金服基于react打造的一个服务于企业级产品的UI框架 ...
- 基于mpvue的小程序项目搭建的步骤
mpvue 是美团开源的一套语法与vue.js一致的.快速开发小程序的前端框架,按官网说可以达到小程序与H5界面使用一套代码.使用此框架,开发者将得到完整的 Vue.js 开发体验,同时为 H5 和小 ...
- 基于mpvue的小程序项目搭建的步骤一
未标题-1.png mpvue 是美团开源的一套语法与vue.js一致的.快速开发小程序的前端框架,按官网说可以达到小程序与H5界面使用一套代码.使用此框架,开发者将得到完整的 Vue.js 开发体验 ...
- Zabbix概念、安装以及快速入门
Zabbix is an enterprise-class open source distributed monitoring solution.[1] Zabbix是一个企业级的.开源的.分布式的 ...
- Keras深度学习框架安装及快速入门
1.下载安装Keras 如果你是安装的Anaconda组合套件,可以直接在Prompt上执行安装命令:pip install keras 注意:最下面为Successfully...表示安装成功! 2 ...
- axis1.4开发webservice客户端(快速入门)-基于jdk1.4
写在前面: 对于客户端,服务端开发好了以后,客户端只需要调用就可以了.这里我们讲的是,根据服务的访问地址,来生成客户端所需要用到的代码(听说有几种调用方式,但是用到最常见的就是stub方式,貌似我说的 ...
- axis1.4开发webservice服务端(快速入门)-基于jdk1.4
写在前面: 现在有很多开发webservice的方法以及框架,什么cxf等,但是这些在你编写服务类的时候都要用到注解这个功能.如果现在的jdk是1.4的,那么就不能使用注解这个功能了.所以这里可以用到 ...
随机推荐
- 在Office上怎么用MathType编辑公式
随着无纸化的办公程序越来越深入普及到社会的各个层面,很多资料都是电子档.从前手写的内容全都转换到了电脑上.用Office办公时,有一个很大的问题,那就是其中的公式要怎么编辑? 从前用手写毫无困难,什么 ...
- [转] CSocket 和CAsyncSocket类介绍
微软的MFC把复杂的WinSock API函数封装到类里,这使得编写网络应用程序更容易. CAsyncSocket类逐个封装了WinSock API,为高级网络程序员提供了更加有力而灵活的方法.这个类 ...
- linux中,通过crontab -e编辑生成的定时任务,写在哪个文件中
环境描述: 操作系统:Red Hat Enterprise Linux Server release 6.6 (Santiago) 内核版本:2.6.32-504.el6.x86_64 需求描述: 一 ...
- 工作流JBPM_day01:7-使用流程变量
工作流JBPM_day01:7-使用流程变量 工作流就像流水线 对应数据库中的一张表 ProcessVariableTest.Java import java.util.List; import or ...
- MVC3--View层
Razor二义性: 1,当view层中出现 邮件格式时候比如 anbylau2130@qq.com 这种情况Razor将会出现多义性 可以使用@@来转义为一个@字符, 如:<p>y ...
- angularjs基础——控制器
1)当使用非空ng-app和ng-controller时,变量由angularjs控制器来处理 2)控制器接管模型变量后,直接修改模型,模版里的变量还是会自动变的 <!DOCTYPE html& ...
- Redis(二)-- 发布订阅、事务、安全、持久化
一.Redis发布订阅 Redis 发布订阅(pub/sub)是一种消息通信模式:发送者(pub)发送消息,订阅者(sub)接收消息. 打开两个窗口:session1 和 session2 在sess ...
- Linux 虚拟终端:screen
screen 是一个虚拟终端,我们可以把执行时间很长的命令放在虚拟终端中执行,即使终端断开,这个虚拟终端也会在后台执行 [root@localhost ~]$ yum install -y scree ...
- 第七篇:Logistic回归分类算法原理分析与代码实现
前言 本文将介绍机器学习分类算法中的Logistic回归分类算法并给出伪代码,Python代码实现. (说明:从本文开始,将接触到最优化算法相关的学习.旨在将这些最优化的算法用于训练出一个非线性的函数 ...
- linux配置了dns后导致mysql远程连接慢问题
有时候dns配置错误或者其它原因会导致mysql远程连接缓慢,此时只需要关闭mysqlDNS反向解析即可解决此问题. 打开my.cnf配置,将[mysqld]下的#skip-name-resolve前 ...