一、创建项目 

1、cmd切换到目标文件夹

2、初始化项目

npx create-react-app init-mobile

3、切换到对应目录根据提示启动项目

二、配置项目文件目录

调整项目中src目录结构如下：

 三、引入组件库antd-mobile

1、安装

npm install --save antd-mobile@next

2、在App.js根组件中导入要使用的组件

App.js中直接引用即可，无需加载 

import { Button } from 'antd-mobile'

3、渲染组件

直接使用组件 

<Button>登录</Button>

4、在index.js中导入组件库样式

将组件库的样式引入进来（注：当同时引用组件库样式和全局样式index.css时，要想全局样式生效，需将其放在组件库样式之后引入，否则会被覆盖）

import 'antd-mobile/dist/antd-mobile.css'        //已废除

 四、配置基础路由

1、安装路由

npm install --save react-router-dom

2、在App.js中导入路由组件：BrowserRouter、Routes、Route

import {BrowserRouter as Router, Route, Routes} from 'react-router-dom';

3、在pages文件夹中创建Home/home.js和Mine/mine.js两个组件 

Home/home.js
import React from "react";export default class Home extends React.Component {render() {return <div>首页</div>}
}Mine/mine.js
import React from "react";export default class Mine extends React.Component {render() {return <div>我的</div>}
}

4、使用Route组件配置首页和城市选择页面

function App() {return (<Router><Routes><Route path="/" element={<Main/>} exact/><Route path="/login" element={<Main/>}/><Route path="/home" element={<Home/>}/><Route path="/mine" element={<Mine/>}/></Routes></Router>);
}

五、外观和样式调整

1、修改页面标签（index.html中）

2、调整基础样式（index.css中）

html, body {height: 100%;font-family: 'Microsoft YaHei';color: #333;background-color: #fff;
}* {box-sizing: border-box;
}

六、配置Less

1、安装Less

npm install less less-loader --save

2、将webpack.config.js暴露出来

运行：

npm run eject

? Are you sure you want to eject? This action is permanent. Yes

3、在webpack.config.js中配置Less

const lessRegex = /\.less$/;
const lessModuleRegex = /\.module\.less$/;

{test: lessRegex,exclude: lessModuleRegex,use: getStyleLoaders({importLoaders: 1,modules: true,sourceMap: isEnvProduction && shouldUseSourceMap},"less-loader"),sideEffects: true
},
{test: lessModuleRegex,use: getStyleLoaders({importLoaders: 1,sourceMap: isEnvProduction && shouldUseSourceMap,modules: true,getLocalIdent: getCSSModuleLocalIdent},"less-loader")
},

"babel": {"presets": [["react-app",{"runtime": "automatic"}]]
}

4、使用Less

创建.less文件，并在文件中设置所需样式属性即可

注：在整个.less文件外要包一层global，防止class名称在预处理编译中被重命名导致样式失效

:global {.main {img {background: #333333;width: 10px;height: 10px;}}
}

 再在所需文件中引用即可：

import'./main.less'

 七、配置@

将@配置为src目录，省去’../‘的步骤

 '@':path.resolve('src')

八、安装redux

npm i redux

npm install --save react-redux