Vite搭建React项目的方法步骤

这篇文章主要介绍了Vite搭建React项目的方法步骤，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

前言

日常放鸽，火钳刘明

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

Vite搭建React项目的方法步骤

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

Vite搭建React项目的方法步骤

Vite搭建React项目的方法步骤

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

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

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

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

配置路由

改造 main.tsx

router/index.ts 文件配置

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

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

service 管理

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

这样可以方便请求管理

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

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

import qs from 'qs'
import axios from "axios";
interface IRequest {
url: string
params?: SVGForeignObjectElement
query?: object
header?: object
method?: "POST" | "OPTIONS" | "GET" | "HEAD" | "PUT" | "DELETE" | undefined
}
interface IResponse {
count: number
errorMsg: string
classify: string
data: any
detail?: any
img?: object
}
export const request = ({ url, params, query, header, method = 'POST' }: IRequest): Promise<IResponse> => {
return new Promise((resolve, reject) => {
axios(query ? `${url}/?${qs.stringify(query)}` : url, {
data: params,
headers: header,
method: method,
})
.then(res => {
resolve(res.data)
})
.catch(error => {
reject(error)
})
})
}

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

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

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

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

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

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

import { defineConfig } from 'vite'
import reactRefresh from '@vitejs/plugin-react-refresh'
import vitePluginImp from 'vite-plugin-imp'
export default defineConfig({
plugins: [
reactRefresh(),
vitePluginImp({
libList: [
{
libName: 'antd-mobile',
style(name) {
return `antd-mobile/lib/${name}/style/index.css`
},
},
]
})
],
resolve: {
extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json'],
alias: {
'@': '/src'
}
},
server: {
proxy: {
// 选项写法
'/api': {
target: 'https://www.xxx.xxx',
changeOrigin: true,
rewrite: (path) => path.replace(/^\/api/, '')
},
}
},
css: {
postcss: {
plugins: [
require('postcss-pxtorem')({ // 把px单位换算成rem单位
rootValue: 32, // 换算基数，默认100，这样的话把根标签的字体规定为1rem为50px,这样就可以从设计稿上量出多少个px直接在代码中写多上px了。
propList: ['*'], //属性的选择器，*表示通用
unitPrecision: 5, // 允许REM单位增长到的十进制数字,小数点后保留的位数。
exclude: /(node_module)/, // 默认false，可以（reg）利用正则表达式排除某些文件夹的方法
})
]
}
}
})