### 安装脚手架
```
npm install create-react-app
```
### 利用脚手架搭建项目
```
npx creact-react-app
```
### 暴露配置项
```
npm run eject
```
### 如果需要安装less

- 打开webpack.config.js找到下面代码所在位置

```
style files regexes
```

- 将以下代码添加到规则后面

```
// 添加 less 解析规则
const lessRegex = /\.less$/;
const lessModuleRegex = /\.module\.less$/;
```

- 添加完成后找到oneOf位置，添加以下代码

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

- 安装 less 和 less-loader 插件

```
npm install less less-loader --s
```

- 重新编译即可
> 注意，如果使用ant-design-mobile的话，请优先配置less，确认配置有效了再安装ant-desian-mobile，不然会出现莫名奇妙的less不生效，项目启动正常，还不报错，至今我也未找到原因，有找到原因的大佬请联系我，[传送门在此](https://gitee.com/Q_Augly/form-vue-to-react.git)。然后我在不安装ant-design-mobile的情况下，项目安装less正常
### 如果需要做移动端适配

- 使用yarn 安装项目所需依赖后，安装 lib-flexible 、 postcss-px2rem 和 postcss-loader：

```
yarn add postcss-px2rem lib-flexible
yarn add postcss-loader --dev
```
- 在入口页面 index.html 中设置标签：
```

```

- 然后在项目入口文件 index.js 中引入 lib-flexible：

```
import 'lib-flexible';
```
- 接着，在项目config目录下的 webpack.config.js 中引入 postcss-px2rem ：
```
const px2rem = require('postcss-px2rem')
```
- 同时，在 webpack.config.js 的 postcss-loader loader里面添加 ：

```
{
loader: require.resolve('postcss-loader'),
options: {
/* 省略代码... */
plugins: () => [
require('postcss-flexbugs-fixes'),
require('postcss-preset-env')({
autoprefixer: {
flexbox: 'no-2009',
},
stage: 3,
}),
px2rem({remUnit: 37.5}), // 添加的内容
/* 省略代码... */
],
sourceMap: isEnvProduction && shouldUseSourceMap,
},
},
```