|
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, 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
5. 配置 主题颜色等
const {
override,
addLessLoader,
fixBabelImports
} = require('customize-cra')
module.exports = override(
addLessLoader({
lessOptions: {
javascriptEnabled: true,
modifyVars: {
'@brand-primary': '#1DA57A',
'@brand-primary-tap': '#1DA57A'
}
}
}),
fixBabelImports('import', {
libraryName: 'antd-mobile',
libraryDirectory: 'es',
style: true
})
)
5. 修改 package.json下的文件
"scripts": {
"start": "react-app-rewired start",
"build": "react-app-rewired build",
"test": "react-app-rewired test",
"eject": "react-scripts eject"
},
6. 重启项目即可
|