背景
最近开始捯饬React，想着学会了React就能把React Native给学习了，然后就能写App。为了能够在React Native上少踩坑，我搭建这个脚手架之后，准备开发一个博文发布系统，作为DEMO练练手。
依赖构成
- React核心
- React-router-dom 路由
- Redux 状态管理
- ESlint 代码格式管理
- Vite 打包工具
- Axios 网络请求库
- Antd UI库
搭建流程
1. 初始化React
1.1 模板初始化
我们可以直接使用Vite自带的模板，初始化React，在本教程中我使用的是template指令来初始化项目。
运行以下指令初始化项目
# npm 6.0
npm init @vitejs/app gublog(项目名称) --template react(模板名称)
# npm 7.0+ (需要额外的双横线)
npm init @vitejs/app gublog(项目名称) --(额外的双横线) --template react(模板名称)
运行指令后，npm将创建一个以项目名称命名的文件夹📁，来初始化项目。
初始化完成后的文件树结构为：
root
└── gublog(项目名称)
├── dist
├── node_modules
├── src
├── index.html
├── package-lock.json
├── package.json
└── vite.config.js
1.2 启动环境
- cd 项目文件夹
- npm install #下载依赖
- npm run dev #启动开发环境
出现上图的网页时，我们就已经搭建出Vite + React的开发环境
2. 安装React-router-dom
为了能够实现无刷新切换页面，此处我的脚手架也会引入官方提供的Router来做前端路由管理。
2.1 安装依赖
运行指令安装路由组件
npm install react-router-dom --save-dev
2.2 注意⚠️
React-Router-Dom就是React Router V4的浏览器版本，原来文档的Router要被替换成BrowserRouter才能使用。为了不使用方面，我们可以使用as关键字来修改别名。
import 'BrowserRouter' as 'Router' from 'react-router-dom'
这里我真的很想吐槽，搞一个React-Router就好了嘛🤷♂️，干嘛还搞一个React-Router-Dom。这东西本质上就是套娃再封装📦。而且最近的V4版本还舍弃了旧的Router标签，改成了BrowserRouter。真的是NT。
解决方法来源：
3. 安装Redux
安装Redux主要是为了使得组件的耦合降低，使得更容易的管理状态，因此被打包到脚手架当中。
3.1 安装依赖
npm install redux --save-dev
4. 安装ESlint
4.1 安装依赖
npm install eslint --save-dev
5. 安装Axios网络请求库
5.1 安装依赖
npm install axios --save-dev
6. 安装AntdUI库
AntdUI是阿里针对React设计的一个UI库，开箱即用，有丰富的文档。(而且还能改颜色)
6.1 安装依赖
npm install redux --save-dev
6.2 引入环境
- 在
main.css中添加import 'antd/dist/antd.css'导入CSS库 - 在
Main.jsx的代码头部添加import {组件名称} from antd导入组件
结尾
这篇文章就此告一段落。Axios和ESlint的使用我还在摸索中，后面还会继续更新，敬请期待。目前在使用这个脚手架重写GuBlog日志程序当中，后面时机成熟后也会同新版本的脚手架文章一同推出。
