📅 我們繼續 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語法解析。🚀
感謝閱讀,歡迎點贊、收藏和分享 😊