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