#步骤一、下载包
npm install antd-mobile --save
#步骤二、在入口页面 index.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>
#步骤三
两种引入方法:
一、全局引入
#在index.jsx中引入css或less
import 'antd-mobile/dist/antd-mobile.css';
// or 'antd-mobile/dist/antd-mobile.less'
#在需要的模块中引入用到的组件
import { Button } from 'antd-mobile';
二、按需加载
方法一:使用 babel-plugin-import(推荐)
引入react-app-rewired
和 babel-plugin-import
并
npm install react-app-rewired customize-cra --save-dev
npm install babel-plugin-import --save-dev
修改 package.json
里的启动配置
#修改 `package.json` 里的启动配置
"scripts": {
"start": "react-app-rewired start"
"build": "react-app-rewired build",
"test": "react-app-rewired test --env=jsdom",
}
然后在项目根目录创建一个 config-overrides.js
用于修改默认配置。
//config-overrides.js 文件
const { override, fixBabelImports } = require('customize-cra');
module.exports = override(
fixBabelImports('import', {
libraryName: 'antd-mobile',
style: 'css',
}),
);
在需要的组件中引入使用
import { Button } 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