基于vite搭建React项目
背景
最近要做一个新项目，打算用 vite 来搭建项目。毕竟最近 vite 很火，vite 也可以说代表着未来，可以学习一下。
本文主要记录整个项目的搭建过程。
脚手架
直接用 vite 官方文档 提供的命令来初始化整个项目，框架选择 React ，加上 ts 类型提示。整个过程没有踩到坑，很顺畅。
组件库
组件库使用字节开源的 arco-design。原因是以前一直用的 arco-desigin，对它比较熟悉 (提过PR)，而且 oncall 也能及时响应。
css
tailwind，推荐使用，没有用过的一定要试一下！！
tailwind css 是现代工程化框架里把原子css做到极致的css框架，它将大部分css属性封装成语义化的类，使用者的关注点从写css到使用tailwind类名，极大的减少了代码量。
优点：
-
降低为类命名的精力——如何为div起一个语义化的类名是开发者经常遇到的问题，使用tailwind之后，大部分情况下都能直接使用 tailwind 类名而无需开发者关注如何起名，这对大部分开发者都是喜闻乐见的事。
-
大大减少CSS代码量。
-
样式跟着元素走，方便删除。tailwind是内联在元素上，元素如果需要删除，css也会跟着删除。
缺点：原子类太多，需要花费时间去记忆和查阅官方文档。
如果你是VSCode使用者，VSCode有tailwind插件提示。
image.png
请求
请求使用 fetch，使用 React hooks 库 swr 来管理请求的状态，包括返回的数据，error状态等。
举个🌰：
import useSWR from 'swr'
function Profile() {
const { data, error } = useSWR('/api/user', fetcher)
if (error) return <div>failed to load</div>
if (!data) return <div>loading...</div>
return <div>hello {data.name}!</div>
}
swr 对接口状态进行了封装，在内部维护了数据的状态，使开发者不在需要去自行维护这些状态。
当然，swr 的能力不止这些，还有像条件请求、自动重新请求、缓存等功能。
状态管理
新项目状态管理舍弃了 redux，原因是太繁琐，不好用。
接入了轻量级的 unstated-next ，使用很简单，源码也才40行，很容易理解原理。
项目目录
-src
-assets
-components
-constant
-hooks
-pages
-services
-routes.ts
-App.tsx
-main.css
-main.tsx
路由配置
新增 routes.ts 文件，所有页面的路由都集中在 routes.ts 配置。
import YourComponent from '@pages/YourComponent'
const routesConfig = [
{
path: '/',
component: YourComponent
},
]
export default routesConfig
把页面布局以及路由都集中到 App.tsx 中：
import { BrowserRouter, Route, Routes } from 'react-router-dom';
import routerConfig from '@/routes'
import Layout from '@/components/Layout'
import Header from '@/components/Header';
import { Notification } from '@arco-design/web-react'
import userContainer, { useUser } from '@/hooks/useUser';
import { Spin } from '@arco-design/web-react'
import './main.css';
import "@arco-design/web-react/dist/css/arco.css";
function App() {
const { isLoading, isError } = useUser();
if (isLoading) {
return <Spin dot />
}
if (isError) {
Notification.error({
title: '请重新登录',
content: '正在重新加载',
})
return null;
}
return (
<BrowserRouter basename='mlbb'>
<userContainer.Provider>
<Header />
<div className="flex">
<Layout />
<div className="bg-slate-200 flex-1 p-5 h-screen overflow-hidden">
<Routes>
{
routerConfig.map((route) => {
const { path, component: Component} = route
return (
<Route key={route.path} path={path} element={<Component />} />
)
})
}
</Routes>
</div>
</div>
</userContainer.Provider>
</BrowserRouter>
)
}
export default App;
在 App.tsx 里面，可以判断当前用户是否登录，如果没有登录则提示登录及展示登录页。
由于笔者是在 sso 登录，已经在接口层面做了判断，如果没有登录会直接在接口层打开 sso 登录页。
整个页面的布局如下：
image.png
渲染
在 main.tsx 渲染 App
import ReactDOM from 'react-dom/client'
import App from './App';
ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
<App />
)
问题
整个流程还是比较顺畅的，唯一遇到的问题是在 接入 sso 之后，如果本地启动还是用 localhost去访问，则 sso 无法访问，这就需要把页面通过域名来访问，然后代理到本地。
而 vite 默认是无法通过ip去访问的，需要在 vite.config.ts 配置 host ：
image.png
