# react-template-vite

**Repository Path**: GQ-og/react-template-vite

## Basic Information

- **Project Name**: react-template-vite
- **Description**: react + vite的项目模板
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-04-22
- **Last Updated**: 2025-11-28

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Vite + React 全栈工程化模板

## 功能特性

- ✅ 基于Vite 6的极速开发体验
- ✅ React 19最新特性支持
- ✅ Redux Toolkit状态管理
- ✅ React Router v7路由系统
- ✅ 移动端/PC自适应布局
- ✅ TypeScript类型安全
- ✅ UnoCSS原子化样式
- ✅ 完善的代码规范检查(Lint)
- ✅ Git提交规范(Husky)

## 技术栈

- ⚡ Vite 6.3
- ⚛️ React 19
- 🌀 TypeScript 5.7
- 🧰 Redux Toolkit 2.7
- 🛣️ React Router 7.5
- 🎨 UnoCSS原子化CSS
- 📦 PNPM 9包管理

## 快速开始

```bash
# 安装依赖
pnpm install

# 开发模式
pnpm dev

# 生产构建
pnpm build

# 代码规范检查
pnpm lint
```

## 项目结构

```
├── src
│   ├── store          # Redux状态管理
│   │   ├── features   # 功能模块
│   │   └── store.ts   # Store配置
│   ├── constant       # 常量配置
│   │   └── router.tsx # 路由配置
│   ├── components     # 公共组件
│   ├── pages          # 页面组件
│   ├── utils          # 工具函数
│   └── styles         # 全局样式
```

## 路由配置

采用React Router v7的createBrowserRouter实现：

```tsx
// src/constant/router.tsx
export default createBrowserRouter([
  {
    path: '/',
    element: <Layout />,
    children: [
      {
        path: 'pageA',
        element: <PageA />,
        loader: ({ request }) => {
          // 路由守卫示例
          if (!store.getState().auth.isLoggedIn) {
            throw redirect('/login')
          }
          return null
        },
      },
      { path: 'pageB', element: <PageB /> },
    ],
  },
])
```

## 状态管理

Redux Toolkit配置示例：

```ts
// src/store/store.ts
export const store = configureStore({
  reducer: {
    auth: authReducer,
    counter: counterReducer,
  },
  middleware: (getDefaultMiddleware) => [
    ...getDefaultMiddleware({
      serializableCheck: false,
    }),
    loggerMiddleware,
  ],
  devTools: process.env.NODE_ENV !== 'production',
})

// 类型安全的RootState和AppDispatch
type RootState = ReturnType<typeof store.getState>
type AppDispatch = typeof store.dispatch
```

## 部署指南

1. 生产构建：`pnpm build`
2. 推荐服务器配置：
   - Nginx开启Gzip压缩
   - 配置缓存策略
   - 启用HTTP/2
3. 容器化部署示例：

```Dockerfile
FROM node:20-alpine AS builder
WORKDIR /app
COPY . .
RUN pnpm install && pnpm build

FROM nginx:alpine
COPY --from=builder /app/dist /usr/share/nginx/html
```

### css

内置 UNOCSS 与 SCSS 与 POSTCSS
如果你想使用自适应大小,可以使用 rpx 做 css 单位

## 代码规范

- ESLint：JavaScript/TypeScript规范检查
- Stylelint：CSS/SCSS样式检查
- Prettier：代码自动格式化
- Commitlint：Git提交信息规范

## 许可证

MIT License