AntUI是蚂蚁金服推出的一套前端页面组件封装的解决方案. 包括Ant Design(pc端)和Ant Design Mobile(移动端)两部分. 这里讨论Ant Design Mobile部分. Ant Design Mobile of React 官方地址
1. 快速使用
安装antd-mobile
npm install antd-mobile --save
入口页面 (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'
2. 按需导入
安装以下依赖库
npm i react-app-rewired
npm i babel-plugin-import
npm i customize-cra
一些早期资料中使用的是 react-app-rewired 1.*版本，安装后，在项目根目录中新建文件config-overrides.js文件。即可操作了~
但是在 react-app-rewired2.* 以后，不再支持injectBabelPlugin的方式，需要安装customize-cra。
更改package.json
启动脚本由react-scripts 改为react-app-rewired
// 由
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
}
// 改为:
"scripts": {
"start": "react-app-rewired start",
"build": "react-app-rewired build",
"test": "react-app-rewired test",
"eject": "react-app-rewired eject"
}
添加config-overrides.js文件
在package.json的同级目录下添加config-overrides.js文件
const {
override,
fixBabelImports
} = require('customize-cra');
module.exports = override(
fixBabelImports("import", {
libraryName: "antd-mobile", libraryDirectory: "es", style: 'css'
}),
);
node-sass
如果使用.scss后缀名的css文件, 需要安装 node-sass 才能编译
网友评论