- 创建一个项目
create-react-app react-mobile-demo
- 安装
npm install antd-mobile --save
- 入口页面 (html 或 模板) 相关设置
<!-- 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>
- 按需加载 支持less
1: npm install less-loader less --save-dev
npm install react-app-rewired customize-cra --save-dev
2: /* package.json */
"scripts": {
- "start": "react-scripts start",
+ "start": "react-app-rewired start",
- "build": "react-scripts build",
+ "build": "react-app-rewired build",
- "test": "react-scripts test --env=jsdom",
+ "test": "react-app-rewired test --env=jsdom",
}
3: 然后在项目根目录创建一个 config-overrides.js
4: npm install babel-plugin-import --save-dev
5: /* config-overrides.js */
const path = require("path");
const {
override,
fixBabelImports,
addWebpackAlias,
addPostcssPlugins,
addLessLoader
} = require('customize-cra');
module.exports = override(
addLessLoader(),
addWebpackAlias({ //增加路径别名的处理
'@': path.resolve('./src')
}),
fixBabelImports('import', {
libraryName: 'antd-mobile',
style: 'css',
}),
addPostcssPlugins([require('postcss-pxtorem')({
rootValue: 16,
propList: ['*']
}),])
)
5:按需加载引入方式
import { Button } from 'antd-mobile';