# nuxt3-vite-ssr

**Repository Path**: zhangenliang/nuxt3-vite-ssr

## Basic Information

- **Project Name**: nuxt3-vite-ssr
- **Description**: nuxt3-vite-ssr    test，仅是个人demo， 练手的，仅做参看
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 3
- **Forks**: 0
- **Created**: 2025-05-31
- **Last Updated**: 2026-02-27

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Nuxt3 Vite SSR 企业官网模板  test
## 项目简介
本项目基于 Nuxt 3 + Vite，采用服务端渲染（SSR）模式，适用于企业官网、产品展示、内容管理等场景。内置 TypeScript、Pinia、TailwindCSS、Prisma、mysql2、MySQL 等现代前后端技术，支持 API 路由、用户认证、SEO 优化、静态生成与多环境部署。

## 主要功能模块
- 企业官网/产品展示 ：支持多页面、动态产品页、艺术展示页等。
- 后台管理 ：/pages/admin/ 下为后台管理页面，支持内容管理、用户管理等。
- 用户认证 ：基于 JWT，支持注册、登录、权限校验，token 存储于 localStorage/cookie。
- API 路由 ：/server/api/ 下为所有后端接口，RESTful 风格，支持 GET/POST/PUT/DELETE。
- 数据库 ORM ：Prisma + MySQL，支持用户、角色、内容等多表关联。
- 状态管理 ：Pinia 集中管理全局状态。
- 样式与动画 ：TailwindCSS 原子化样式，支持响应式、暗色模式，内置粒子、波浪等动画。
- SEO 优化 ：支持 SSR、静态生成、meta 标签配置。

## 技术栈
- 前端框架 ：Nuxt 3 (Vue 3)
- 构建工具 ：Vite
- 状态管理 ：Pinia
- 样式 ：TailwindCSS
- 类型系统 ：TypeScript
- 后端/数据库 ：Prisma + mysql2 + MySQL
- API 设计 ：RESTful
- 认证 ：JWT
## 目录结构说明
```
├── app.vue                  # 应用根组件
├── app/                     # 自定义 SPA 加载模板
├── assets/                  # 静态资源（如全局样式）
├── components/              # 可复用组件（业务区块、UI 组件、艺术区块等）
│   ├── sections/            # 页面区块组件（如 AboutSection、ProductsSection）
│   ├── art/                 # 艺术相关组件
│   └── ui/                  # 通用 UI 组件（如 AppButton、AppCard）
├── composables/             # 组合式函数（如 useAboutApi、useUserApi）
├── pages/                   # 页面与自动路由（支持嵌套路由、动态路由）
│   ├── admin/               # 后台管理页面
│   ├── art/                 # 艺术官网页面
│   ├── products/            # 产品页及动态路由
├── server/                  # 服务端 API 与中间件
│   ├── api/                 # API 端点（如 about-us.ts、products.ts、users.ts、login.ts）
│   └── middleware/          # 全局中间件（如 auth.ts，JWT 校验）
├── stores/                  # Pinia 状态管理
├── types/                   # 类型定义
├── utils/                   # 工具函数
├── prisma/                  # Prisma schema（数据库结构定义）
├── public/                  # 静态资源
├── nuxt.config.ts           # Nuxt 配置
├── package.json             # 依赖与脚本
└── README.md                # 项目说明
```

## 安装与启动
### 1. 安装依赖
```

pnpm install
```
### 2. 本地开发
```
pnpm dev
```
### 3. 构建生产包
```
pnpm build:prod
```
### 5. 生产环境 SSR 启动
```
pnpm build:prod && pnpm start:prod
```
## 环境变量说明
项目支持多环境配置，需在根目录下配置 .env.development 、 .env.production 、 .env.test 文件，常用变量如下：

- NUXT_PUBLIC_APP_NAME ：应用名称
- NUXT_PUBLIC_API_BASE ：API 基础路径
- JWT_SECRET ：JWT 密钥
- DB_HOST 、 DB_USER 、 DB_PASSWORD 、 DB_NAME 、 DATABASE_URL ：数据库配置
## 主要依赖说明
- nuxt ：核心框架，支持 SSR/静态生成
- @pinia/nuxt 、 pinia ：状态管理
- @nuxtjs/tailwindcss 、 tailwindcss ：原子化 CSS
- axios ：HTTP 请求
- prisma 、 mysql2 ：数据库 ORM 与驱动
- jsonwebtoken 、 argon2 ：认证与加密
- vue 、 vue-router ：Vue 3 及路由
## 脚本命令 参照package.json
- pnpm dev ：开发环境启动
- pnpm build:prod ：生产构建
- pnpm generate ：静态站点生成
- pnpm start:prod ：生产 SSR 启动
- pnpm dev:test 、 pnpm dev:prod ：多环境开发
## SSR/环境检测
TypeScript 全局可用：
```
const isDev = process.env.NODE_ENV === 'development'
const isTest = process.env.NODE_ENV === 'test'
const isProd = process.env.NODE_ENV === 'production'
```
## 环境变量说明
项目支持多环境配置，需在根目录下配置 .env.development 、 .env.production 、 .env.test 文件，常用变量如下：

- NUXT_PUBLIC_APP_NAME ：应用名称
- NUXT_PUBLIC_API_BASE ：API 基础路径
- JWT_SECRET ：JWT 密钥
- DB_HOST 、 DB_USER 、 DB_PASSWORD 、 DB_NAME 、 DATABASE_URL ：数据库配置
## 页面与自动路由
- 所有页面文件自动映射为路由，支持嵌套、动态路由（如 products/[id].vue）。
- 典型页面：主页（index.vue）、关于我们（about.vue）、产品页、用户注册/登录、后台管理。
## 组件化开发
- sections/ 下为业务区块组件（如 AboutSection、ProductsSection），实现页面分块复用。
- ui/ 下为通用 UI 组件（如 AppButton、AppCard），支持插槽和样式扩展。
- art/ 下为艺术相关组件（如 ArtworkGrid、HeroCarousel）。
## 组合式 API
- composables/ 下封装常用 API 调用（如 useAboutApi），便于逻辑复用和类型推断。
## API 设计示例
- server/api/about-us.ts ：关于我们数据的获取与更新，支持分组、批量插入。
- server/api/products.ts ：产品列表接口，支持模拟数据。
- server/api/users.ts ：用户管理，含分页、角色关联、增删改查。
- server/api/login.ts ：用户登录，返回 JWT token。
- server/middleware/auth.ts ：全局认证中间件，支持 JWT 校验、路由白名单、权限控制。
- 典型接口：
  - GET /api/about-us ：获取关于我们数据
  - PUT /api/about-us ：更新关于我们数据
  - GET /api/products ：获取产品列表
  - GET/POST/PUT/DELETE /api/users ：用户管理
  - POST /api/login ：用户登录
## 认证与中间件
- server/middleware/auth.ts ：全局认证中间件，保护需要登录的 API 路由
- JWT 认证，token 存储于前端 localStorage/cookie
## 数据库与 ORM
- prisma/schema.prisma ：数据库结构定义
- 支持 MySQL，开发时可用 Docker 快速启动数据库
## 状态管理
- stores/ 下为 Pinia 状态模块，集中管理全局状态。
## 样式与动画
- TailwindCSS 原子化样式，支持响应式、暗色模式。
- 页面动画如渐变、粒子背景、波浪分割等。
## 常见问题
- 依赖安装失败 ：请确保已安装 pnpm，Node.js 版本 >= 18
- 数据库连接失败 ：检查 .env 配置与数据库服务状态
- 页面样式异常 ：确认 TailwindCSS 配置无误并已重启服务
## 部署建议
1. 生产环境建议使用 pnpm build && pnpm start:prod 启动 SSR 服务
2. 可选用 PM2、Docker 等方式进行进程守护与容器化部署
3. 静态站点可用 pnpm generate 输出至 CDN/静态服务器
## 参考文档
- Nuxt 官方文档
- Pinia 状态管理
- TailwindCSS 中文网
- Prisma 官方文档

# git提交
git add .
pnpm commit
git push origin master