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(е6@(9屔屔ZB;>rv_6>r6W.*LJ0
ML(A&/*A*L屔*ML屔*MLk{v{nk{v{йнЕД				k`еен頵
8Z~8jkU$ńее(((((