安装
npm install antd-mobile --save
使用
- 入口页面(html)引入下面代码
<!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>
// 解决移动端点击3秒延迟
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>
- App组件引入样式
import 'antd-mobile/dist/antd-mobile.css' - 组件中引入要使用的UI组件
import React, { Component } from 'react'
import { Button, Toast } from 'antd-mobile'
export default class App extends Component {
handleClick = () =>{
Toast.info('提交成功')
}
render() {
return (
<div>
<Button type="primary" onClick={this.handleClick}>提交</Button>
</div>
)
}
}
按需打包
- 下载依赖包
npm i babel-plugin-import --seve-dev
在package.json文件中,找到"babel",添加下面代码, 然后引入组件即可, 不需要引入css样式
"babel": {
//原有代码
"presets": [
"react-app"
],
//添加代码
"plugins": [
[
"import",
{
"libraryName": "antd-mobile",
"style": "css"
}
]
]
}
