Vite搭建React项目的方法步骤

前言

日常放鸽，火钳刘明

这是一个基于 vite 搭建的 react 的项目，开发体验非常棒。

创建一个 vite 项目

如上图，选择了 react-ts 预设模板，如果出现下图一样的工程

打开浏览器输入，如上图所示的话。那么恭喜你，你可以正常开发 react 项目了。完结撒花

如果不行的话，直接看 vite 官网，它比我写的详细

改造工程

但上述只是一个基础的 react demo，在实际开发项目中，是远远不够的，需要额外做一些项目配置

目录约定

根据日常的开发习惯，先进行基本的目录约定

配置路由

改造 main.tsx

router/index.ts 文件配置

可以参考上述的配置，把其他的属性也配置进去，比如重定向（redirect）、懒加载等常见路由配置项

另外个人比较倾向通过配置来生成路由，约定式路由总感觉不太方便。

service 管理

所有项目请求都放入 service，建议每个模块都有对应的文件管理，如下所示

这样可以方便请求管理

base.ts 作为业务请求类，可以在这里处理一些业务特殊处理

until/request 作为统一引入的请求方法，可以自定义替换成 fetch、axios 等请求库，同时可以在此方法内封装通用拦截逻辑。

具体通用拦截，请参考 axios 配置，或者自己改写即可，需要符合自身的业务需求。

这里使用 axios 构建出来的资源有问题，不要直接使用，请参考之前的请求封装替换成 fetch，如果有同学构建成功的，请留言 = =！

在具体业务开发使用的时候可以按照模块名引入，容易查找对应的接口模块

这套规则同样可以适用于 store、router、utils 等可以拆开模块的地方，有利于项目维护。

上述是针对项目做了一些业务开发上的配置与约定，各位同学可以根据自己团队中的规定与喜好行修改。

其他配置

这里主要是关于 vite.config.ts 的配置，对项目整体做一些附加配置。

大体也是一些基本内容：

• vitepluginimp 是将 antd-mobile 进行按需加载
• postcss-pxtorem 是配置移动端 px 转换的插件
• server.proxy 配置项目代理
• resolve.alias 配置别名，如果需要 vscode 正常识别的话，需要 ts.config 也配置一下

其中 antd-mobile 可以自行替换成 antd，包括 postcss 也可以根据自己的喜好替换

通过上述的简单改造，此时已经可以进行正常的小项目开发了。完结撒花！

并且已经在用此配置写了一个简单的 h5 项目，后续随着项目的迭代会逐步完善一下模板。

到此这篇关于vite搭建react项目的方法步骤的文章就介绍到这了,更多相关vite搭建react项目内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持！