Ant Design 3.0 使用案例

代码地址以下：<br>http://www.demodashi.com/demo/12309.html

本文适合对象

1. 有过React使用经验。
2. 有过webpack使用经验。
3. 了解node。

DEMO使用方式

1. npm install
2. npm run start
3. npm run startfe
4. 登陆localhost:8088查看效果

注：demo中node使用pm2进行管理和启动，若是须要查看终端输出，可使用pm2 log命令查看。

本demo是在macOS环境下开发运行的，如果windows环境运行有问题，能够在评论留言。

关于AntDesign

虽然Antd是一门很是棒的UI设计语言，可是在我我的看来，Antd比较适合用做后台系统开发，并非很是适合用在前端页面开发。

后台页面不须要给用户看，所以以样式和开发效率以及功能为主。

如今的网站十分看重用户体验，前端项目的体积须要尽量的小，然而Antd组件因为拥有充足的功能和接口，就致使组件的体积必然不小。

做为通用组件库，Antd组件拥有在大部分状况下均可以用获得的接口，可是在咱们具体的业务中，可能只须要其中的一两个功能，可是却不得不引入整个组件，原本5kb就能够完成咱们所需功能的代码，如今却变成了50kb甚至100kb的代码量，这在前端项目中是十分致命的问题。

在index.js文件中，我只引入了Menu和Icon两个组件，文件大小就已经飙升到了450kb。

import { Menu, Icon } from 'antd';

即便使用了Uglifyjs插件对js文件进行压缩，最后仍是有200kb左右的大小。

可能若是要咱们本身的业务中实现这个Menu组件，只须要几kb就能够了。

可是这并不可否认Antd自己的优秀，即便是前端工程师，也能够从Antd组件中学习到不少东西，甚至咱们平时开发组件的时候，都是按照antd的标准和接口设计去进行开发的。

这里是知乎上对Antd设计语言的评价：连接。

这里是antd发行3.0版本的版本那说明：连接。

Ant Design 3.0 按需加载

快速引入使用

咱们经过npm安装好了antd以后，不可能直接将antd所有组件都引入进来，那样会致使包的说起很是大，因此必须使用按需加载，用到什么组件就引入什么组件。

npm install --save antd

若npm速度太慢，能够安装淘宝的国内镜像cnpm。

npm install -g cnpm

而后用cnpm安装就会快不少。

cnpm install --save antd

安装完成以后，咱们只须要在react组件中引入组件便可。

import Button from 'antd/lib/button';
import 'antd/lib/button/style';
// 注意，这里antd实用的是less样式，若是webpack没有配置对less的解析的话，这样引入会报错。
// 能够直接使用引入css的方式
// import 'antd/lib/button/style/css';

这样引入以后，咱们就能够在下面直接使用Button组件了。

<Button>This is a Button</Button>

可是这种引入方式十分繁琐，不只路径名太长，并且咱们每引入一个组件，还须要专门到相应的style文件里面引入样式文件。

就没有一种方法能够直接引入组件就能够了吗？

答案固然是有的。

配合babel自动加载

若是你使用过webpack和es6语法，那么你必定知道什么是babel，若是你对babel不了解，那么能够先到babel中文网了解一下。

咱们若是在项目中使用了babel，就能够配合babel-plugin-import插件自动按需加载。

npm install --save babel-plugin-import

安装好插件以后，咱们在根目录下建立一个.babelrc文件(注意直接以.开头)，用来对全局babel进行配置。

{
	"plugins": [
		["import"]
	]
}

这样咱们就能够自动引入babel-plugins-import插件了。

使用了这个插件以后，我就能够变成这种写法了：

import { Button } from 'antd';

babel-plugin-import 能够帮咱们把这种写法自动编译成以下这种写法：

import Button from 'antd/lib/button';

如今路径名过长的问题解决了。

关于引入样式的问题，咱们能够仍是经过babel-plugin-import插件的style属性来作到组件样式自动加载。

{
	"plugins": [
		["import", {"libraryName": "antd", "style": true}]
	]
}

这样，在组件中，咱们就能够直接用import { Button } from 'antd';这种写法自动引入组件和组件相对应的样式文件了。

不过这里要注意的是，import插件的style属性，不只会引入组件样式，还会引入一些必要的全局样式，你们使用的时候要注意，官方建议若是没有必要的话，能够不使用该属性。

组件代码截图：

前端组件展现截图：

自此，在项目中引入antd的工做就完成了。

补充项目截图

本文只是讲述了如何在项目中引入antd，由于没有业务场景，因此并无写具体的前端页面，你们看demo的时候尽可能看代码配置便可。

demo是在上一篇的demo：react-cli的基础上进行改造的，可能有不少不必的插件和配置文件，你们忽略便可。Ant Design 3.0 使用案例

代码地址以下：<br>http://www.demodashi.com/demo/12309.html

注：本文著做权归做者，由demo大师代发，拒绝转载，转载须要做者受权