1、npm install -g create-react-app
2、create-react-app my-app/或者npx create-react-app my-app
3、cd my-app
4、npm start
5、按需加载：npm install react-app-rewired customize-cra --save-dev
6、修改/* package.json */
"scripts": { "start": "react-app-rewired start", "build": "react-app-rewired build", "test": "react-app-rewired test --env=jsdom", }
7、在项目根目录创建一个 config-overrides.js
module.exports = function override(config, env) { // do stuff with the webpack config... return config; };
8、npm install babel-plugin-import --save-dev
9、修改config-overrides.js
const { override, fixBabelImports } = require('customize-cra'); module.exports = function override(config, env) { // do stuff with the webpack config... return config; }; module.exports = override( fixBabelImports('import', { libraryName: 'antd-mobile', style: 'css', }), );
10、npm install antd-mobile
11、引用
e.g：import { Button } from 'antd-mobile';
12、配置路由：npm i react-router-dom
13、npm install axios
14、配置跨域：npm install http-proxy-middleware
在src目录创建一个setupProxy.js文件
const { createProxyMiddleware } = require('http-proxy-middleware'); module.exports = function (app) { app.use(createProxyMiddleware("/api", { target: "http://172.2.2.2:8888", //配置你要请求的服务器地址 pathRewrite: {'^/api': ''}, changeOrigin: true })) };
15、mbox配置事项
a、npm i eject（如果报错则运行这两条命令：git add . 然后git commit -m 'eject'
注意：不要push）
b、npm i mobx mobx-react
c、配置装饰器（ 修饰器 es6 ） babel
npm i babel-plugin-transform-decorators-legacy -D
npm i @babel/preset-env -D
npm i babel-plugin-transform-class-properties -D
npm i @babel/plugin-proposal-decorators -D
d、配置package.json
"babel": { "plugins": [ [ "@babel/plugin-proposal-decorators", { "legacy": true } ], "transform-class-properties" ], "presets": [ "react-app", "@babel/preset-env" ] },
具体Mobx使用可参考原文https://blog.csdn.net/yanwu9537/article/details/93224463
注意注意请注意：我在使用create-react-app搭建React开发环境后，添加config-overrides.js文件，并修改package.json中对应命令后，执行npm start有可能会报错，反正我是遇到了，报的是以下错误：
Error: Cannot find module 'react-scripts/package.json'
出现这个错误是因为缺少react-scripts插件，需要再配置下：
npm install --save react-scripts
配置完成啦！可以在https://mobile.ant.design/docs/react/use-with-create-react-app-cn
选择自己需要的组件使用啦~