日常放鸽，火钳刘明
这是一个基于 vite 搭建的 React 的项目，开拓体验很是棒。
建设一个 Vite 项目yarn create @vitejs/app
如上图，选择了 react-ts 预设模板，假如呈现下图一样的工程
yarn // 安装依赖 yarn dev // 启动开拓情况
打开欣赏器输入，如上图所示的话。那么恭喜你，你可以正常开拓 React 项目了。完结撒花
假如不可的话，直接看 vite 官网，它比我写的具体
改革工程但上述只是一个基本的 React demo，在实际开拓项目中，是远远不足的，需要特别做一些项目设置
目次约定按照日常的开拓习惯，先举办根基的目次约定
├── dist/ // 默认的 build 输出目次 └── src/ // 源码目次 ├── assets/ // 静态资源目次 ├── config ├── config.js // 项目内部业务相关基本设置 ├── components/ // 民众组件目次 ├── service/ // 业务请求打点 ├── store/ // 共享 store 打点目次 ├── until/ // 东西函数目次 ├── pages/ // 页脸孔录 ├── router/ // 路由设置目次 ├── .main.tsx // Vite 依赖主进口 ├── .env // 情况变量设置 ├── vite.config.ts // vite 设置选型，详细可以查察官网 api └── package.json
设置路由
改革 main.tsx
import React from 'react' import ReactDOM from 'react-dom' import { HashRouter, Route, Switch } from 'react-router-dom' import routerConfig from './router/index' import './base.less' ReactDOM.render( <React.StrictMode> <HashRouter> <Switch> { routerConfig.routes.map((route) => { return ( <Route key={route.path} {...route} /> ) }) } </Switch> </HashRouter> </React.StrictMode>, document.getElementById('root') )
router/index.ts 文件设置
import BlogsList from '@/pages/blogs/index' import BlogsDetail from '@/pages/blogs/detail' export default { routes: [ { exact: true, path: 'https://www.jb51.net/', component: BlogsList }, { exact: true, path: '/blogs/detail/:article_id', component: BlogsDetail }, ], }
可以参考上述的设置，把其他的属性也设置进去，好比重定向（redirect）、懒加载等常见路由设置项
别的小我私家较量倾向通过设置来生成路由，约定式路由总感受不太利便。
service 打点
所有项目请求都放入 service，发起每个模块都有对应的文件打点，如下所示
import * as information from './information' import * as base from './base' export { information, base }
这样可以利便请求打点
base.ts 作为业务请求类，可以在这里处理惩罚一些业务非凡处理惩罚
import { request } from '../until/request' const prefix = '/api' export const getAllInfoGzip = () => { return request({ url: `${prefix}/apis/random`, method: 'GET' }) }
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，假如有同学构建乐成的，请留言 = =！
在详细业务开拓利用的时候可以凭据模块名引入，容易查找对应的接口模块
import { information } from "@/service/index"; const { data } = await information.getAllInfoGzip({ id });
这套法则同样可以合用于 store、router、utils 等可以拆开模块的处所，有利于项目维护。
上述是针对项目做了一些业务开拓上的设置与约定，列位同学可以按照本身团队中的划定与爱好行修改。
其他设置这里主要是关于 vite.config.ts 的设置，对项目整体做一些附加设置。