一、安装使用

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的基本项目搭建】的更多相关文章

  1. docker安装kafka快速入门

    docker安装kafka快速入门 1.安装zookeeper docker search zookeeperdocker pull zookeeperdocker run -d -v /home/s ...

  2. Flask简介,安装,demo,快速入门

    1.Flask简介 Flask是一个相对于Django而言轻量级的Web框架. 和Django大包大揽不同,Flask建立于一系列的开源软件包之上,这其中 最主要的是WSGI应用开发库Werkzeug ...

  3. ant design pro超详细入门教程

    1.Ant Design Pro 初了解 说到ant design pro,得先了解一下ant design是个什么东西?ant design蚂蚁金服基于react打造的一个服务于企业级产品的UI框架 ...

  4. 基于mpvue的小程序项目搭建的步骤

    mpvue 是美团开源的一套语法与vue.js一致的.快速开发小程序的前端框架,按官网说可以达到小程序与H5界面使用一套代码.使用此框架,开发者将得到完整的 Vue.js 开发体验,同时为 H5 和小 ...

  5. 基于mpvue的小程序项目搭建的步骤一

    未标题-1.png mpvue 是美团开源的一套语法与vue.js一致的.快速开发小程序的前端框架,按官网说可以达到小程序与H5界面使用一套代码.使用此框架,开发者将得到完整的 Vue.js 开发体验 ...

  6. Zabbix概念、安装以及快速入门

    Zabbix is an enterprise-class open source distributed monitoring solution.[1] Zabbix是一个企业级的.开源的.分布式的 ...

  7. Keras深度学习框架安装及快速入门

    1.下载安装Keras 如果你是安装的Anaconda组合套件,可以直接在Prompt上执行安装命令:pip install keras 注意:最下面为Successfully...表示安装成功! 2 ...

  8. axis1.4开发webservice客户端(快速入门)-基于jdk1.4

    写在前面: 对于客户端,服务端开发好了以后,客户端只需要调用就可以了.这里我们讲的是,根据服务的访问地址,来生成客户端所需要用到的代码(听说有几种调用方式,但是用到最常见的就是stub方式,貌似我说的 ...

  9. axis1.4开发webservice服务端(快速入门)-基于jdk1.4

    写在前面: 现在有很多开发webservice的方法以及框架,什么cxf等,但是这些在你编写服务类的时候都要用到注解这个功能.如果现在的jdk是1.4的,那么就不能使用注解这个功能了.所以这里可以用到 ...

随机推荐

  1. 在Office上怎么用MathType编辑公式

    随着无纸化的办公程序越来越深入普及到社会的各个层面,很多资料都是电子档.从前手写的内容全都转换到了电脑上.用Office办公时,有一个很大的问题,那就是其中的公式要怎么编辑? 从前用手写毫无困难,什么 ...

  2. [转] CSocket 和CAsyncSocket类介绍

    微软的MFC把复杂的WinSock API函数封装到类里,这使得编写网络应用程序更容易. CAsyncSocket类逐个封装了WinSock API,为高级网络程序员提供了更加有力而灵活的方法.这个类 ...

  3. linux中,通过crontab -e编辑生成的定时任务,写在哪个文件中

    环境描述: 操作系统:Red Hat Enterprise Linux Server release 6.6 (Santiago) 内核版本:2.6.32-504.el6.x86_64 需求描述: 一 ...

  4. 工作流JBPM_day01:7-使用流程变量

    工作流JBPM_day01:7-使用流程变量 工作流就像流水线 对应数据库中的一张表 ProcessVariableTest.Java import java.util.List; import or ...

  5. MVC3--View层

    Razor二义性: 1,当view层中出现   邮件格式时候比如   anbylau2130@qq.com 这种情况Razor将会出现多义性 可以使用@@来转义为一个@字符, 如:<p>y ...

  6. angularjs基础——控制器

    1)当使用非空ng-app和ng-controller时,变量由angularjs控制器来处理 2)控制器接管模型变量后,直接修改模型,模版里的变量还是会自动变的 <!DOCTYPE html& ...

  7. Redis(二)-- 发布订阅、事务、安全、持久化

    一.Redis发布订阅 Redis 发布订阅(pub/sub)是一种消息通信模式:发送者(pub)发送消息,订阅者(sub)接收消息. 打开两个窗口:session1 和 session2 在sess ...

  8. Linux 虚拟终端:screen

    screen 是一个虚拟终端,我们可以把执行时间很长的命令放在虚拟终端中执行,即使终端断开,这个虚拟终端也会在后台执行 [root@localhost ~]$ yum install -y scree ...

  9. 第七篇:Logistic回归分类算法原理分析与代码实现

    前言 本文将介绍机器学习分类算法中的Logistic回归分类算法并给出伪代码,Python代码实现. (说明:从本文开始,将接触到最优化算法相关的学习.旨在将这些最优化的算法用于训练出一个非线性的函数 ...

  10. linux配置了dns后导致mysql远程连接慢问题

    有时候dns配置错误或者其它原因会导致mysql远程连接缓慢,此时只需要关闭mysqlDNS反向解析即可解决此问题. 打开my.cnf配置,将[mysqld]下的#skip-name-resolve前 ...