# demo-vue-tsx

**Repository Path**: demoverse/demo-vue-tsx

## Basic Information

- **Project Name**: demo-vue-tsx
- **Description**: A SPA project that uses only vue(3) TSX
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-03-24
- **Last Updated**: 2025-07-06

## Categories & Tags

**Categories**: Uncategorized

**Tags**: Vue, tsx, TypeScript

## README

# Web 前端框架示例

本示例演示使用 react、vue-tsx、solid 开发 SPA 时的相同点与差异。
三个子项目使用完全相同的目录结构，方便比较差异。

对于 vue，本项目坚持全程使用 tsx，而非传统 `.vue` 文件构造的单页面组件。Vue
引入 tsx 为它本身带来了更多的可能性。

## 使用组件

### 共同组件

- 样式：`tailwindcss`
- 构建工具：`vite`
- 图标：`lucide-[react|vue-next|solid]`
- 代码质量：`biome`
- 数据获取：`ky` + `@tanstack/[react|vue|solid]-query`
- 数据校验：`zod`
- 表单：`@tanstack/[react|vue|solid]-form`

### 不同组件

| 组件     | React                    | Vue-TSX                | Solid                |
| -------- | ------------------------ | ---------------------- | -------------------- |
| 路由     | `react-router` | `vue-router`           | `@solidjs/router`    |
| 渲染错误 | `react-error-boundary`   | `onErrorCaptured` 钩子 | 内置 `ErrorBoundary` |
| Store    | `zustand`                | `solid-zustand`        | `pinia`              |