Nuxt 3 + TypeScript + Vue 3 + TailwindCSS 实现SSR服务端渲染企业官网demo

# 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