1.创建项目
2.引入ant mobile
npm install antd-mobile --save
3.修改public下的index.html
<!DOCTYPE html>
<html>
<head>
<!-- set `maximum-scale` for some compatibility issues -->
// <meta name="viewport" content="width=device-width, initial-scale=1" /> pc端
<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>
<div id="root"></div>
</body>
</html>
4. 使用 babel-plugin-import 进行按需加载
5. 使用第三方插件库 修改react脚手架
1. 安装：npm i react-app-rewired customize-cra --save-dev
2. 在根目录下新建文件config-overrides.js文件
3. 安装less和less-loader：npm i less less-loader --save-dev
// ant mobbile css是用less 写的, 修改自定义主题 使用less 进行修改 注意less-loader的版本 高版本会报错
5. 配置 主题颜色等
//config-overrides.js文件
const {
override,
// ...
addLessLoader,
fixBabelImports
// ...
} = require('customize-cra')
module.exports = override(
// ...
// less
addLessLoader({
// 现在的写法
lessOptions: {
javascriptEnabled: true,
modifyVars: {
'@brand-primary': '#1DA57A', // 修改主题颜色
'@brand-primary-tap': '#1DA57A' // 修改按压下的颜色
}
}
}),
// antd-mobile按需加载 - babel-plugin-import
fixBabelImports('import', {
libraryName: 'antd-mobile',
libraryDirectory: 'es',
// style: 'css' 之前写法
style: true
})
)
5. 修改 package.json下的文件
// react-scripts 改为 react-app-rewired
"scripts": {
"start": "react-app-rewired start",
"build": "react-app-rewired build",
"test": "react-app-rewired test",
"eject": "react-scripts eject"
},
6. 重启项目即可