NuNote - Nuxt 3 文章管理系统

基于 Nuxt 3 全栈开发的文章管理系统，使用 Nuxt UI 组件库，数据持久化存储在本地 JSON 文件。

启动命令

# 安装依赖
pnpm install
# 开发模式启动
pnpm dev
# 构建生产版本
pnpm build
# 预览生产版本
pnpm preview

访问地址：http://localhost:3000

项目结构

NuNote/
├── app/ # 前端应用代码
│ ├── assets/css/ # 全局样式文件
│ ├── layouts/ # 布局组件
│ │ └── default.vue # 默认布局（导航栏）
│ ├── pages/ # 页面路由
│ │ ├── index.vue # 文章列表页
│ │ ├── figma.vue # Figma 演示页面
│ │ └── articles/
│ │ ├── new.vue # 新建文章页
│ │ └── [id]/
│ │ ├── index.vue # 文章详情页
│ │ └── edit.vue # 编辑文章页
│ └── app.vue # 应用入口
├── server/ # 后端 API
│ ├── api/articles/ # 文章 REST API
│ │ ├── index.get.ts # GET 获取文章列表
│ │ ├── index.post.ts # POST 创建文章
│ │ └── [id].{get,put,delete}.ts # 单篇文章操作
│ └── utils/storage.ts # JSON 数据存储工具
├── data/articles.json # 数据文件（持久化存储）
├── nuxt.config.ts # Nuxt 配置
└── package.json

核心功能实现思路

1. 数据存储（本地 JSON）

• 使用 Node.js fs/promises 读写本地 JSON 文件
• 数据文件位于 data/articles.json
• 支持增删改查操作，数据持久化不丢失
• 文章 ID 使用 Date.now() 生成时间戳

2. 后端 API（Nuxt Server）

• 基于文件系统的 API 路由：server/api/
• RESTful 设计：
  • GET /api/articles - 获取列表（按时间倒序）
  • GET /api/articles/:id - 获取单篇文章
  • POST /api/articles - 创建文章（验证标题/内容必填）
  • PUT /api/articles/:id - 更新文章
  • DELETE /api/articles/:id - 删除文章

3. 前端页面（Nuxt 3）

• 使用 Nuxt UI 组件库（UButton, UInput, UTextarea, UCard 等）
• 统一浅色主题（slate 配色方案）
• 响应式布局，支持移动端
• 页面路由：
  • / - 文章列表（悬停显示编辑/删除按钮）
  • /articles/new - 新建文章表单
  • /articles/:id - 文章详情
  • /articles/:id/edit - 编辑文章
  • /figma - Figma 首页模拟（全屏演示）

4. 关键技术点

• 路由设计：使用 [id]/index.vue 避免与 [id]/edit.vue 冲突
• 样式统一：强制浅色主题，禁用 Google 字体
• 交互优化：文章列表整行可点击，操作按钮悬停显示
• 数据验证：后端 API 校验必填字段，前端友好提示

技术栈

• 框架：Nuxt 3 + Vue 3
• UI 库：Nuxt UI + Tailwind CSS
• 后端：Nitro Server（Nuxt 内置）
• 存储：本地 JSON 文件
• 包管理器：pnpm

GitHub 仓库

https://github.com/WednesdayCAT/NuNote