Ant Design --配置（1）

Ant Design 官方介绍： “在中台产品的研发过程中，会出现不同的设计规范和实现方式，但其中往往存在很多类似的页面和组件，给设计师和工程师带来很多困扰和重复建设，大大降低了产品的研发效率。”因为数据交互非常频繁，大量的表单、时间选择器、表格、单选多选框，以及各种标识状态的组件，如果光靠手写或者使用 jQuery 插件，其开发的工作量仍然是相当大的，因此，Ant Design “经过大量的项目实践和总结，沉淀出一个中台设计语言 Ant Design。旨在统一中台项目的前端 UI 设计，屏蔽不必要的设计差异和实现成本，解放设计和前端的研发资源。”

特性

提炼自企业级中后台产品的交互语言和视觉风格。开箱即用的高质量 React 组件。使用 TypeScript 构建，提供完整的类型定义文件。基于 npm + webpack + babel 的工作流，支持 ES2015 和 TypeScript。

环境

现代浏览器和 IE9 及以上（需要 polyfills）。支持服务端渲染。Electron

安装

一般使用npm或则yarn安装，本次安装是使用npm（cnpm）

$ npm install antd --save $ yarn add antd

安装脚手架工具

如果只是简单的查看演示则使用如下：

$ npm install antd-init -g

在正式项目中使用：

$ npm install dva-cli -g $ dva -v 0.7.0

创建一个应用

$ dva new dva-quickstart //文件名

进入文件夹，安装依赖并启动

$ cd dva-quickstart $ npm start

此时，若成功，则显示：

Compiled successfully! The app is running at: http://localhost:8000/ Note that the development build is not optimized. To create a production build, use npm run build.

成功后，打开默认端口，在json的配置文件中，可以去更改端口号

http://localhost:8000

使用antd 按需加载

$ npm install antd babel-plugin-import --save

按需加载， 编辑 .roadhogrc，使 babel-plugin-import 插件生效。

"extraBabelPlugins": [ - "transform-runtime" + "transform-runtime", + ["import", { "libraryName": "antd", "style": "css" }] ],

自己使用的项目文件的目录结构

├── /dist/ # 项目输出目录 ├── /src/ # 项目源码目录 │ ├── /components/ # UI组件及UI相关方法 │ │ ├── skin.less # 全局样式 │ │ └── vars.less # 全局样式变量 │ ├── /routes/ # 路由组件 │ │ └── app.js # 路由入口 │ ├── /models/ # 数据模型 │ ├── /services/ # 数据接口 │ ├── /themes/ # 项目样式 │ ├── /mock/ # 数据mock │ ├── /utils/ # 工具函数 │ │ ├── config.js # 项目常规配置 │ │ ├── menu.js # 菜单及面包屑配置 │ │ ├── config.js # 项目常规配置 │ │ ├── request.js # 异步请求函数 │ │ └── theme.js # 项目需要在js中使用到样式变量 │ ├── route.js # 路由配置 │ ├── index.js # 入口文件 │ └── index.html ├── package.json # 项目信息 ├── .eslintrc # Eslint配置 └── .roadhogrc.js # roadhog配置