# fullstack-app

**Repository Path**: ljrong/fullstack-app

## Basic Information

- **Project Name**: fullstack-app
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-09-11
- **Last Updated**: 2025-10-11

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# My Fullstack App

一个基于 pnpm workspace 的全栈应用项目，包含后端 API、管理后台和移动端应用。

## 🛠️ 技术栈

### 📦 Monorepo 管理

- **pnpm workspace** - 包管理和 monorepo 支持
- **volta** - Node.js 版本管理

### 🔧 Server (NestJS)

- **NestJS** - Node.js 企业级框架
- **TypeScript** - 类型安全
- **Prisma** - 现代化 ORM
- **MySQL** - 关系型数据库

### 🖥️ Web Admin (Nuxt 4)

- **Nuxt 4** - Vue.js 全栈框架
- **@nuxt/ui** - 现代化 UI 组件库
- **Vue 3.5** - 响应式框架
- **TypeScript** - 类型安全
- **Pinia** - 状态管理
- **VueUse** - 实用组合式函数

### 📱 Web Mobile (Nuxt 4)

- **Nuxt 4** - Vue.js 全栈框架
- **Vant 4** - 移动端 UI 组件库
- **Vue 3.5** - 响应式框架
- **TypeScript** - 类型安全
- **Pinia** - 状态管理

### 🔗 Shared

- **共享类型定义** - TypeScript 类型
- **通用工具函数** - 跨项目复用
- **Zod 验证** - 数据验证

## 📁 项目结构

```
my-fullstack-app/
├── packages/
│   ├── server/                    # 后端 API (NestJS)
│   │   ├── src/
│   │   ├── prisma/
│   │   └── package.json
│   ├── shared/                    # 共享代码
│   │   ├── src/
│   │   └── package.json
│   ├── web-admin/                 # 管理后台 (Nuxt 4)
│   │   ├── app/                   # Nuxt 4 新目录结构
│   │   │   ├── components/
│   │   │   ├── composables/
│   │   │   ├── layouts/
│   │   │   ├── pages/
│   │   │   ├── stores/
│   │   │   └── utils/
│   │   ├── nuxt.config.ts
│   │   └── package.json
│   └── web-mobile/                # 移动端应用 (Nuxt 4)
│       ├── app/                   # Nuxt 4 新目录结构
│       │   ├── components/
│       │   ├── composables/
│       │   ├── layouts/
│       │   ├── pages/
│       │   ├── stores/
│       │   └── utils/
│       ├── nuxt.config.ts
│       └── package.json
├── pnpm-workspace.yaml
├── package.json
└── README.md
```

## 🚀 快速开始

### 环境要求

- Node.js 22.17.0+
- pnpm 10.15.0+
- MySQL 8.0+

### 安装依赖

```bash
# 安装所有依赖
pnpm install

# 或分别安装
pnpm --filter server install
pnpm --filter web-admin install
pnpm --filter web-mobile install
```

### 启动开发环境

```bash
# 启动所有服务
pnpm dev

# 或分别启动
pnpm server    # 后端 API (http://localhost:3000)
pnpm admin     # 管理后台 (http://localhost:3001)
pnpm mobile    # 移动端 (http://localhost:3002)
```

### 数据库操作

```bash
# 生成 Prisma 客户端
pnpm db:generate

# 运行数据库迁移
pnpm db:migrate

# 启动 Prisma Studio
pnpm db:studio
```

## 📋 可用脚本

### 全局脚本

- `pnpm dev` - 启动所有开发服务器
- `pnpm build` - 构建所有项目
- `pnpm server` - 仅启动后端服务
- `pnpm admin` - 仅启动管理后台
- `pnpm mobile` - 仅启动移动端
- `pnpm db:generate` - 生成 Prisma 客户端
- `pnpm db:migrate` - 运行数据库迁移
- `pnpm db:studio` - 启动 Prisma Studio

### 项目特定脚本

#### Server

```bash
cd packages/server
pnpm dev          # 开发模式
pnpm build        # 构建
pnpm start        # 生产模式
```

#### Web Admin

```bash
cd packages/web-admin
pnpm dev          # 开发模式
pnpm build        # 构建
pnpm generate     # 静态生成
pnpm preview      # 预览构建结果
```

#### Web Mobile

```bash
cd packages/web-mobile
pnpm dev          # 开发模式
pnpm build        # 构建
pnpm generate     # 静态生成
pnpm preview      # 预览构建结果
```

## 🏗️ 架构特点

### Nuxt 4 新特性

本项目采用 Nuxt 4 的最新架构：

- **app/ 目录** - 新的源代码组织方式
- **改进的 TypeScript 支持** - 更好的类型推断
- **增强的开发体验** - 更快的 HMR 和构建
- **兼容性版本** - 向前兼容的 API

### 组件分层架构

按照 Vue3 + Nuxt4 前端架构规范：

- **页面组件** (Pages) - 可使用 Store 和 Composable
- **业务组件** (Business) - 可使用 Store 和 Composable
- **展示组件** (UI) - 仅通过 Props 接收数据
- **布局组件** (Layouts) - 可使用 Store 和 Composable

### 数据流规则

- **向下数据流** - Props 传递数据
- **向上数据流** - Events 传递事件
- **跨组件通信** - Store 状态共享

## 🔗 相关链接

- [NestJS 文档](https://nestjs.com/)
- [Nuxt 4 文档](https://nuxt.com/docs/4.x/guide)
- [Prisma 文档](https://www.prisma.io/docs)
- [@nuxt/ui 文档](https://ui.nuxt.com/)
- [Vant 4 文档](https://vant-ui.github.io/vant/)
- [Vue 3 文档](https://vuejs.org/)
- [Pinia 文档](https://pinia.vuejs.org/)

## 📄 许可证

MIT License