Vite - 搭建 React 项目

Posted 2023-03-28

参考技术A

日常放鸽，火钳刘明

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

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

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

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

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

改造 main.tsx

router/index.ts 文件配置

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

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

这样可以方便请求管理

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

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

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

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

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

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

大体也是一些基本内容：

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

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

由于小程序的 markdown 兼容实在是有点差，这一块用 H5 重写了

markdown 解析直接采用字节开源的 markdown 编辑器，不得不说，很 nice！

emm，期待尽早相见！