Ant Design 常用命令汇总

Ant Design React

安装

1. 安装脚手架工具#

antd-init 是一个用于演示 antd 如何使用的脚手架工具，真实项目建议使用 dva-cli。

$ npm install antd-init -g

更多功能请参考脚手架工具和开发工具文档。

除了官方提供的脚手架，您也可以使用社区提供的脚手架和范例：

antd-admin

reactSPA

react-redux-antd by Justin-lu

react-redux-antd by okoala

react-antd-admin

react-antd-redux-router-starter

react-redux-antd-starter

更多脚手架可以查看脚手架市场

2. 创建一个项目#

使用命令行进行初始化。

$ mkdir antd-demo && cd antd-demo

$ antd-init

antd-init 会自动安装 npm 依赖，若有问题则可自行安装。

若安装缓慢报错，可尝试用 cnpm 或别的镜像源自行安装：rm -rf node_modules && cnpm install。

3. 使用组件#

脚手架会生成一个 Todo 应用实例（一个很有参考价值的 React 上手示例），先不管它，我们用来测试组件。

直接用下面的代码替换 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.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.toString()}</div>

        </div>

      </LocaleProvider>

    );

  }

}

ReactDOM.render(<App />, document.getElementById('root'));

你可以在左侧菜单选用更多组件。

4. 开发调试#

一键启动调试，访问 http://127.0.0.1:8000 查看效果。

$ npm start

5. 构建和部署#

$ npm run build

入口文件会构建到 dist 目录中，你可以自由部署到不同环境中进行引用。

Ant Design Pro安装#

有两种方式进行安装：

直接 clone git 仓库#

$ git clone --depth=1 https://github.com/ant-design/ant-design-pro.git my-project

$ cd my-project

使用命令行工具#

你可以使用集成化的命令行工具 ant-design-pro-cli。

$ npm install ant-design-pro-cli -g

$ mkdir my-project && cd my-project

$ pro new  # 安装脚手架

目录结构#

我们已经为你生成了一个完整的开发框架，提供了涵盖中后台开发的各类功能和坑位，下面是整个项目的目录结构。

├── mock                     # 本地模拟数据

├── public

│   └── favicon.ico          # Favicon

├── src

│   ├── assets               # 本地静态资源

│   ├── common               # 应用公用配置，如导航信息

│   ├── components           # 业务通用组件

│   ├── e2e                  # 集成测试用例

│   ├── layouts              # 通用布局

│   ├── models               # dva model

│   ├── routes               # 业务页面入口和常用模板

│   ├── services             # 后台接口服务

│   ├── utils                # 工具库

│   ├── g2.js                # 可视化图形配置

│   ├── theme.js             # 主题配置

│   ├── index.ejs            # HTML 入口模板

│   ├── index.js             # 应用入口

│   ├── index.less           # 全局样式

│   └── router.js            # 路由入口

├── tests                    # 测试工具

├── README.md

└── package.json

本地开发#

安装依赖。

$ npm install

如果网络状况不佳，可以使用 cnpm 进行加速。

$ npm start

启动完成后会自动打开浏览器访问 http://localhost:8000，你看到下面的页面就代表成功了。

1. 创建一个项目#

可以是已有项目，或者是使用 dva / create-react(-native)-app 新创建的空项目，你也可以从官方示例脚手架里拷贝并修改

参考更多官方示例集或者你可以利用 React 生态圈中的各种脚手架

2. 安装#

$ npm install antd-mobile --save

3. 使用#

Web 使用方式

React Native 使用方式

入口页面 (html 或模板) 相关设置：

引入 FastClick 并且设置 html meta (更多参考 #576)

引入 Promise 的 fallback 支持 (部分安卓手机不支持 Promise)

<!DOCTYPE html>

<html>

<head>

  <!-- set `maximum-scale` for some compatibility issues -->

  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" />

  <script src="https://as.alipayobjects.com/g/component/fastclick/1.0.6/fastclick.js"></script>

  <script>

    if ('addEventListener' in document) {

      document.addEventListener('DOMContentLoaded', function() {

        FastClick.attach(document.body);

      }, false);

    }

    if(!window.Promise) {

      document.writeln('<script src="https://as.alipayobjects.com/g/component/es6-promise/3.2.2/es6-promise.min.js"'+'>'+'<'+'/'+'script>');

    }

  </script>

</head>

<body></body>

</html>

组件使用实例：

import { Button } from 'antd-mobile';

ReactDOM.render(<Button>Start</Button>, mountNode);

引入样式：

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

按需加载#

注意：强烈推荐使用。

下面两种方式都可以只加载用到的组件，选择其中一种方式即可。

使用 babel-plugin-import（推荐）。

// .babelrc or babel-loader option

{

  "plugins": [

    ["import", { libraryName: "antd-mobile", style: "css" }] // `style: true` 会加载 less 文件

  ]

}

然后只需从 antd-mobile 引入模块即可，无需单独引入样式。

// babel-plugin-import 会帮助你加载 JS 和 CSS

import { DatePicker } from 'antd-mobile';

手动引入

import DatePicker from 'antd-mobile/lib/date-picker';  // 加载 JS

import 'antd-mobile/lib/date-picker/style/css';        // 加载 CSS

// import 'antd-mobile/lib/date-picker/style';         // 加载 LESS

更多增强 (非必须):#

如何自定义主题？见此文档，基于 antd-mobile 的自定义 UI 库：web-custom-ui / web-custom-ui-pro