java 搭建ant design_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(, mountNode);

引入样式

import 'antd/dist/antd.css'; //or 'antd/dist/antd.less'

1.3、按需加载

//.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';