基於vue的記事本應用 vuememo - 更新

新版本更新支持 Markdown 形式的筆記，支持導出 .png 格式的筆記圖片，複製內容到剪貼板方便分享，支持將全部筆記數據導出爲 JSON 格式的文件等。

💯 VUEMEMO

基於 Vue.js 的簡單記事本 SPA 。Mint-UI、Vue、VueRouter、Vuex，使用localStorage做爲數據本地持久化，並支持使用Markdown格式筆記，主要功能有增查改刪筆記、按條件過濾和排序筆記、並支持文字和圖片等形式的筆記.

Vue.js-based simple notepad SPA. Mint-UI, Vue, VueRouter, Vuex, the use of localStorage as local database(storage), and support the Markdown formatting language, the main features are increased check delete notes, conditional filtering and sorting notes , And supports notes in the form of words and pictures.

🚀 DEMO

點擊這裏看演示：DEMO

源代碼：github

---

🚨 BUILD SETUP

# 安裝依賴
npm install
# 開發模式localhost:8080
npm run dev
# 打包構建
npm run build
複製代碼

🎯 主要功能

• v1
  • ✔️響應適配 Responsive
  • ✔️建立、修改筆記 create or modify notes
  • ✔️刪除部分或所有筆記 delete notes or drop all data
  • ✔️查看筆記詳細內容 read the note content
  • ✔️標記筆記是否完成 check if completed
  • ✔️切換筆記顯示模式 switch display mode
• v2
  • ✔️按是否完成進行過濾 filter by completed
  • ✔️按建立時間排序 sort by timestamp
  • ✔️按類別進行過濾 filter by type
  • ✔️收藏、取消收藏和顯示收藏筆記 star or unstar
  • ✔️經過 localStorage 對象的數據本地持久化 user data stored in localStorage
• v3
  • ✔️支持Markdown格式 support Markdown
  • ✔️以圖片的形式保存筆記 save note as img(.png)
  • ✔️複製筆記內容到剪貼板 Copy the note content to clipboard
  • ✔️導出所有筆記至 JSON 文件格式(Blob) export all notes to JSON file
• v4
  • 實時保存筆記 save note in real time
  • 定時推送提醒通知 notifications
  • 經過base64支持保存圖片 save the image via base64
  • 經過Canvas支持繪圖 draw in canvas

📦 文件目錄

├── App.vue
├── assets // 靜態資源
├── components // 組件
|  ├── Header.vue // 導航欄
|  ├── Index.vue // 主頁
|  ├── MemoItem.vue // 筆記文檔
|  ├── ModifyMemo.vue // 修改筆記界面
|  ├── NewMemo.vue // 新建筆記界面
|  ├── Preview.vue // 預覽 MD 筆記
|  ├── ShowMemo.vue // 查看筆記界面
|  └── Tabbar.vue // tabbar欄
├── main.js
├── router // 路由
|  └── index.js
├── store // 全局 store 管理
|  ├── action.js
|  ├── index.js
|  └── mutation.js
└── utils // 全局共用方法
   └── index.js
複製代碼

---

🍎 MESSAGE ME

• github
• blog
• email