1.新建项目
// 代码包安装器
npm install -g create-react-app
// 新建项目
create-react-app my-app
// 进入
cd my-app
// 安装antd-mobile
npm install antd-mobile --save
2.安装依赖
(一路安装下去 )
// 修改webepack 的 react配置
npm install react-app-rewired@2.0.2 customize-cra --save-dev
// px2rem适配的配置
// npm install postcss-px2rem lib-flexible --save --- 这个会影响 antd 的UI显示 使用下面的
npm install postcss-px2rem-exclude -D
npm install react-app-rewire-postcss --save-dev
//按需加载
npm install babel-plugin-import --save-dev
// 使用scss
npm install sass-resources-loader --save-dev
3.修改配置
1) .head配置
<!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>
2). 修改 package.json 文件
// 原来的：
"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-scripts eject"
},
3).根目录新建 config-overrides.js
const { override, fixBabelImports, addWebpackAlias } = require("customize-cra");
const path = require("path");
const rewirePostcss = require("react-app-rewire-postcss");
const px2rem = require("postcss-px2rem");
module.exports = override(
// 按需加载
fixBabelImports("import", {
libraryName: "antd-mobile",
style: "css",
}),
//路径别名
addWebpackAlias({
"@": path.resolve(__dirname, "src"),
}),
// px2rem适配的配置
(config, env) => {
// 重写postcss
rewirePostcss(config, {
plugins: () => [
require("postcss-flexbugs-fixes"),
require("postcss-preset-env")({
autoprefixer: {
flexbox: "no-2009",
},
stage: 3,
}),
// 关键:设置px2rem
// px2rem({
// remUnit: 75,
// exclude: "/node-modules/i",
// }),
// 使用这个才不影响antd 的 UI
require("postcss-px2rem-exclude")({
// remUnit 等于 设计稿宽度 750除以10 37.5
remUnit: 75,
exclude: /node_modules/i,
}),
],
});
// 修改 sass 配置 ，规则 loader 在第五项(具体看配置)
// 全局引入公共样式，使用时候不需再导入
const loaders = config.module.rules.find((rule) =>
Array.isArray(rule.oneOf)
).oneOf;
loaders[5].use.push({
loader: "sass-resources-loader",
options: {
// resources: path.resolve(__dirname, "src/asset/css/common.scss"), //全局引入公共的scss 文件
},
});
return config;
}
);
4).在index.js 直接引入 适配的 lib-flexible
import 'lib-flexible'
4.启动
npm start
