Ant Design 经常使用命令汇总

时间 2019-11-13

原文原文链接

Ant Design React

安装

1. 安装脚手架工具#

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

$ npm install antd-init -g

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

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

antd-adminjava

reactSPAnode

react-redux-antd by Justin-lureact

react-redux-antd by okoalagit

react-antd-admines6

react-antd-redux-router-startergithub

react-redux-antd-starterweb

更多脚手架能够查看脚手架市场

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