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

⚙️ 技术实现点

🧱 组件实现

模板结构 <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">
        <div
            v-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 预览 -->
            <div
                v-if="!note.editing"
                class="prose prose-sm max-w-none p-5"
                v-html="renderMarkdown(note.text)"></div>

            <!-- 编辑器 -->
            <textarea
                v-else
                v-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 样式重点讲解

这些 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语法解析。🚀

感谢阅读，欢迎点赞、收藏和分享 😊