搭建 vite+react 项目

 

一、初始化项目

yarn create vite  　// 初始化

(根据提示，确定项目名称、选择框架react、选择react还是react-ts )
cd 项目名称        　   // 进入项目根目录
yarn                    　// 安装依赖包
yarn dev             　// 运行

 

注释：项目初始化后src中的目录很简单，自己可以按照自己的风格设置子目录结构，例如下面：

   

 

二、配置

打开根目录，参考vite官网，进行配置文件vite.config.js，比如 别名、less、proxy跨域代理 这些常用的配置项。

 

  

三、路由

参考react-router-dom-v6官网：https://reactrouter.com/docs/en/v6

(1)  安装路由包：yarn add react-router-dom@6

(2)  项目入口文件不变

  

(3)  嵌套路由中父组件需要使用Outlet（当然路由也可以平铺）

import { Routes, Route, Navigate, Outlet } from 'react-router-dom';

 

注释：以上的outlet组件只是一个插座，并不能独立显示父组件内容；以下可以解决这个问题：

 

 

四、接口统一配置

(1)  安装axios： yarn add axios 或 npm install axios --save

(2)  新建一个axios.config.js文件（将被引入api文件中）；

(3)  配置（或封装）axios.config.js文件，大致如下：

 

(4)  api文件引入该配置，然后开始写接口，如下：

 

注释：具体地，可以参考：

https://www.npmjs.com/package/axios

https://www.cnblogs.com/ljy-/articles/13863579.html

 

五、状态管理

状态管理有多种方式：redux 、recoil、mobx、xstate、dva等。 

注释：最流行的5种状态管理库的对比可以参考：https://blog.csdn.net/frontend_frank/article/details/109192922

 

对于我这个初学者而言，首选具有庞大社区、大量文档以及大量问答的库，最开始尝试了Redux。下面就以redux为例：

Redux官网：https://react-redux.js.org/

Redux中文：http://cn.redux.js.org/

 

 

组件中，对redux的属性与方法的处理方式，

在类组件中，主要是将state/dispatch绑定到该组件中：

 

 而在函数组件中，可以直接通过react-redux中的如下方法进行调用：

import { useSelector, useDispatch } from 'react-redux';

const dispatch = useDispatch();//若是要将store中的属性更新在视图中，可以用useState设置

 

  

六、函数组件与类组件

 

   

七、UI框架配置（以antd为例）

参考antd官网：https://ant.design/docs/react/introduce-cn 

(1)  安装包：yarn add antd 或 npm install antd --save 

(2)  入口文件引入样式：import 'antd/dist/antd.css'; 或 import 'antd/dist/antd.less'

(3)  使用组件：参考antd官网的组件使用示例；