AntDesign常⽤命令汇总
Ant Design React
安装
1. 安装脚⼿架⼯具
是⼀个⽤于演⽰ antd 如何使⽤的脚⼿架⼯具，真实项⽬建议使⽤。
$ npm install antd-init -g
更多功能请参考和。
除了官⽅提供的脚⼿架，您也可以使⽤社区提供的脚⼿架和范例：
更多脚⼿架可以查看
2. 创建⼀个项⽬
使⽤命令⾏进⾏初始化。
ant design
$ 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('您选择的⽇期是: ' + String());
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.String()}</div>
</div>
</LocaleProvider>
)
;
}
}
你可以在左侧菜单选⽤更多组件。
4. 开发调试
$ npm start
5. 构建和部署
$ npm run build
⼊⼝⽂件会构建到dist⽬录中，你可以⾃由部署到不同环境中进⾏引⽤。
Ant Design Pro安装
有两种⽅式进⾏安装：
直接 clone git 仓库
$ git clone --depth=1 github/ant-design/ant-design-pro.git my-project
$ cd my-project
使⽤命令⾏⼯具
你可以使⽤集成化的命令⾏⼯具。
$ 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
如果⽹络状况不佳，可以使⽤进⾏加速。
$ npm start
启动完成后会⾃动打开浏览器访问，你看到下⾯的页⾯就代表成功了。
1. 创建⼀个项⽬
可以是已有项⽬，或者是使⽤  / create-react(-native)-app 新创建的空项⽬，你也可以从脚⼿架⾥拷贝并修改参考更多或者你可以利⽤ React ⽣态圈中的
2. 安装
$ npm install antd-mobile --save
3. 使⽤
Web 使⽤⽅式
React Native 使⽤⽅式
⼊⼝页⾯ (html 或模板) 相关设置：
引⼊并且设置 html meta (更多参考 )
引⼊ 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="as.alipayobjects/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="as.alipayobjects/g/component/es6-promise/3.2.2/es6-promise.min.js"'+'>'+'<'+'/'+'script>');    }
</script>
</head>
<body></body>
</html>
组件使⽤实例：
import { Button } from 'antd-mobile';
引⼊样式：
import 'antd-mobile/dist/antd-mobile.css';  // or 'antd-mobile/dist/antd-mobile.less'
按需加载
注意：强烈推荐使⽤。
下⾯两种⽅式都可以只加载⽤到的组件，选择其中⼀种⽅式即可。
使⽤（推荐）。
// .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 库： /

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。