50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | NotesApp（便签笔记组件）
📅 我们继续 50 个小项目挑战！—— NotesApp组件
仓库地址：https://github.com/SunACong/50-vue-projects
项目预览地址：https://50-vue-projects.vercel.app/。
使用 Vue 3 的 Composition API 搭配 TailwindCSS 和 marked 库，构建一个支持 Markdown 渲染的笔记应用。该应用允许用户添加、编辑、删除笔记，并且内容会自动保存到 localStorage 中。每个笔记支持实时 Markdown 预览，提供良好的交互体验。
🎯 应用目标
- 支持创建多个笔记卡片
- 每个笔记可切换“编辑”与“预览”模式
- 实时渲染 Markdown 内容
- 支持删除笔记
- 自动保存内容到
localStorage - 使用 Vue 3 Composition API 管理状态
- 使用 TailwindCSS 快速构建响应式 UI
⚙️ 技术实现点
| 技术点 | 描述 |
|---|---|
Vue 3 <script setup> | 使用 reactive 管理笔记数组和状态 |
watchEffect | 监听数据变化并自动保存到 localStorage |
marked | 渲染 Markdown 内容为 HTML |
v-html 指令 | 插入渲染后的 HTML 内容 |
| TailwindCSS | 快速构建响应式布局和样式 |
| 自定义方法 | 实现添加、删除、编辑、切换模式等操作 |
🧱 组件实现
模板结构 <template>
<template><!-- 顶部固定的添加按钮 --><div class="fixed top-4 right-4 z-50"><button@click="addNote"class="rounded bg-lime-500 px-4 py-2 text-white shadow transition hover:bg-lime-600 active:scale-95"><i class="fas fa-plus mr-2"></i>添加笔记</button></div><div class="flex flex-wrap p-16"><divv-for="(note, index) in notes":key="index"class="m-6 flex h-[400px] w-[400px] flex-col overflow-y-auto bg-white shadow-lg"><!-- 工具栏 --><div class="flex justify-end bg-lime-500 p-2"><button class="ml-2 text-lg text-white" @click="toggleEdit(index)"><i class="fas fa-edit"></i></button><button class="ml-2 text-lg text-white" @click="deleteNote(index)"><i class="fas fa-trash-alt"></i></button></div><!-- Markdown 预览 --><divv-if="!note.editing"class="prose prose-sm max-w-none p-5"v-html="renderMarkdown(note.text)"></div><!-- 编辑器 --><textareav-elsev-model="note.text"@input="updateNote(index)"class="w-full flex-1 resize-none border-none p-5 font-sans text-base outline-none"></textarea></div></div>
</template>
模板结构清晰地划分了笔记卡片的各个部分：工具栏、Markdown 预览和编辑器。通过 v-if 控制显示预览或编辑状态。
脚本逻辑 <script setup>
<script setup>
import { reactive, watchEffect } from 'vue'
import { marked } from 'marked'// 初始化：从 localStorage 读取
const notes = reactive(JSON.parse(localStorage.getItem('notes') || '[]').map((text) => ({text,editing: false,}))
)// 渲染 Markdown 文本
const renderMarkdown = (text) => {return marked(text)
}// 添加新笔记
const addNote = () => {notes.push({text: '',editing: true,})
}// 删除笔记
const deleteNote = (index) => {notes.splice(index, 1)
}// 切换编辑/展示模式
const toggleEdit = (index) => {notes[index].editing = !notes[index].editing
}// 更新笔记内容（仅用于触发保存）
const updateNote = (index) => {// 此处无需手动更新 rendered，展示时直接调用 renderMarkdown 函数
}// 自动保存笔记内容到 localStorage
watchEffect(() => {localStorage.setItem('notes', JSON.stringify(notes.map((n) => n.text)))
})
</script>
该脚本使用 reactive 管理笔记数组，并通过 watchEffect 监听数据变化，将内容自动保存至 localStorage。使用 marked 将 Markdown 转换为 HTML 并通过 v-html 渲染。
样式部分（TailwindCSS）
本组件完全依赖 TailwindCSS 来构建美观的界面和交互体验。以下是关键类及其作用：
🎨 TailwindCSS 样式重点讲解
| 类名 | 作用 |
|---|---|
fixed, top-4, right-4, z-50 | 固定在右上角的添加按钮 |
bg-lime-500, text-white, hover:bg-lime-600 | 按钮的背景色、悬停效果 |
transition, active:scale-95 | 添加按钮的动画反馈 |
flex, flex-wrap, p-16 | 布局容器，支持响应式排版 |
m-6, h-[400px], w-[400px] | 每个笔记卡片的大小和间距 |
overflow-y-auto | 支持滚动查看长内容 |
bg-white, shadow-lg | 卡片背景和阴影效果 |
bg-lime-500, p-2 | 工具栏背景和内边距 |
text-lg, text-white | 图标按钮的样式 |
v-html 渲染区：prose, prose-sm, max-w-none | 使用 Tailwind 的 prose 类美化 Markdown 渲染结果 |
textarea 区域：resize-none, border-none, outline-none | 移除默认边框和调整大小功能，提升编辑体验 |
这些 TailwindCSS 类构建出一个现代、美观、响应式的笔记应用。
🔍 关键功能解析
✅ Markdown 实时渲染
使用 marked 库将用户输入的 Markdown 文本即时转换为 HTML，并通过 v-html 指令插入 DOM。这种方式简单高效，适合小型 Markdown 编辑器。
💾 自动保存机制
通过 watchEffect 监听 notes 数组的变化，自动将内容保存到 localStorage，确保用户数据不会丢失。
✏️ 编辑与预览切换
通过 editing 状态切换，用户可以在编辑器和 Markdown 预览之间自由切换，提升交互体验。
🗑️ 删除功能
每个笔记卡片都提供删除按钮，点击后将从 notes 数组中移除该项，同时自动更新 localStorage。
📁 常量定义 + 组件路由
constants/index.js 添加组件预览常量：
{id: 33,title: 'Notes App',image: 'https://50projects50days.com/img/projects-img/33-notes-app.png',link: 'NotesApp',},
router/index.js 中添加路由选项：
{path: '/NotesApp',name: 'NotesApp',component: () => import('@/projects/NotesApp.vue'),},
🏁 总结
通过这篇文章，我们使用 Vue 3 Composition API、TailwindCSS 和 marked 构建了一个功能完善的 Markdown 笔记应用。它不仅支持添加、编辑、删除笔记，还能自动保存内容，并实时渲染 Markdown。该应用结构清晰，易于扩展，是一个非常适合初学者和进阶者学习的项目。
- ✅ 支持导出为 Markdown 文件，将当前笔记导出为
.md文件下载。 - ✅ 根据关键词搜索笔记内容。
- ✅ 允许用户通过拖拽重新排列笔记顺序。
- ✅ 支持暗色/亮色主题切换。
👉 下一篇，我们将完成NoteApp组件，实现了小便签笔记的组件，可以对便签增删改查，支持MarkDown语法解析。🚀
感谢阅读，欢迎点赞、收藏和分享 😊