001-安装及快速入门【基于纯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 手动引入,并覆盖全局样式。

原文地址:https://www.cnblogs.com/bjlhx/p/9200581.html

时间: 2024-10-12 02:00:28

001-安装及快速入门【基于纯antd的基本项目搭建】的相关文章

Docker快速入门实践-纯干货文章

Docker快速入门实践-纯干货文章,如果细看还能发现讲解视频呦!小伙伴们赶紧猛戳吧! Docker快速入门实践-纯干货文章 老男孩教育2016启用最新的官方博文地址: http://blog.oldboyedu.com/ 欢迎小伙伴们收藏关注,干货连连!

使用NSIS制作Windows安装程序快速入门

使用NSIS制作Windows安装程序快速入门 这里使用的NSIS版本为3.04,HM NIS Edit版本为2.0.3. 制作安装程序的过程: 确定安装的功能和界面元素 编写 NSIS 脚本 使用 NSIS 提供的 makensis 或者 makensisw 程序,将步骤 2 编写的脚本编译成可执行的安装程序(点击HM NIS Edit编译按钮) 配置使用 NSIS 的环境 安装 NSIS 安装脚本编辑工具 HM NIS Edit 也可以使用VS Code安装NSIS脚本插件 使用HM NIS

Docker安装与快速入门(Mac)

Docker 是一个开源的应用容器引擎,让开发者可以打包他们的应用以及依赖包到一个可移植的容器中,然后发布到任何流行的 Linux 机器上,也可以实现虚拟化. –百度百科 Docker 结构如下 其核心就是利用LXC来实现类似虚拟机的功能从而更高效利用硬件资源. docker ispect docker_container_id 安装 安装Docker 本文主要针对Mac安装,Windows和Linux类似. 检查系统版本 要安装Docker Toolbox需要OSX版本>=10.8 "M

ELK系列(1) - Elasticsearch + Logstash + Kibana + Log4j2快速入门与搭建用例

前言 最近公司分了个ELK相关的任务给我,在一边学习一边工作之余,总结下这些天来的学习历程和踩坑记录. 首先介绍下使用ELK的项目背景:在项目的数据库里有个表用来存储消息队列的消费日志,这些日志用于开发者日后的维护.每当客户端生产一条消息并发送到消息队列后,就会插入一条对应的记录到数据库里.当这条消息被消费之后,又会更新数据库里对应的记录的几个column的值,比如status.updated_on这些常用的column. 由于客户每天生产消费的消息很多,导致数据库里的这个表里的数据很多,长年累

BIML 101 - ETL数据清洗 系列 - BIML 快速入门教程 - 序

BIML 101 - BIML 快速入门教程 做大数据的项目,最花时间的就是数据清洗. 没有一个相对可靠的数据,数据分析就是无木之舟,无水之源. 如果你已经进了ETL这个坑,而且预算有限,并且有大量的活要做: 时间紧,任务多,是不是有点菊花一紧的感觉. 多少次,你对着几个月前自己写的代码在挠头, 多少次,指着屏幕上别人写的代码目瞪口呆,心中默默数有多少头草泥马.WTF. 不管你是做数据仓库,还是做数据转换,数据集成等等,大量的重复性的工作令人乏味: 但是,如果没有好的设计和遵从一致的流程,后期的

MyBatis总结一:快速入门

简介 MyBatis 是一款优秀的持久层框架,它支持定制化 SQL.存储过程以及高级映射.MyBatis 避免了几乎所有的 JDBC 代码和手动设置参数以及获取结果集.MyBatis 可以使用简单的 XML 或注解来配置和映射原生信息,将接口和 Java 的 POJOs(Plain Old Java Objects,普通的 Java对象)映射成数据库中的记录. 快速入门: 1,创建java项目,并引入相应的jar包 mysql,mybatis <!--mysql--> <dependen

Redis快速入门:安装、配置和操作

本文是有关Redis的系列技术文章之一.在之前的文章中介绍了<Redis快速入门:初识Redis>,对Redis有了一个初步的了解.今天继续为大家介绍Redis如何安装.配置和操作. 系列文章: Redis快速入门:Key-Value存储系统简介 Redis快速入门:选择Key-Value Store Redis是一个开源的使用ANSI C语言编写.支持网络.可基于内存亦可持久化的日志型.Key-Value数据库,并提供多种语言的API.从2010年3月15日起,Redis的开发工作由VMwa

SpringData 基于SpringBoot快速入门

SpringData 基于SpringBoot快速入门 本章通过学习SpringData 和SpringBoot 相关知识将面向服务架构(SOA)的单点登录系统(SSO)需要的代码实现.这样可以从实战中学习两个框架的知识,又可以为单点登录系统打下基础.通过本章你将掌握 SpringBoot项目的搭建,Starter pom的使用,配置全局文件,核心注解SpringBootApplication 介绍以及单元测试 SpringBootTest注解的使用.SpringData 的入门使用,Repos

快闪PPT 快速入门教程 脑洞大开,特效随你定 ----口袋动画PA(初学易上手001):

你没有看错--10分钟入门--30分钟精通---随心所愿--特效你定!!! 举个栗子:废话不多说直接进入教程: 直接上插件:如果慢慢学习可能立马见效效果不明显 上插件:"口袋动画PA"       链接:https://pan.baidu.com/s/1qmfi_ylNuGG5mN143KhfEQ 密码:zj1k 1.现在安装,安装完毕启动PPT,即可效果如下 看到上图恭喜你!!!! 2.使用方法: (1)第一快速套用效果快!!!别太激动,仔细琢磨 使你的快闪PPT无懈可击,带动全场气