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配置