新版本更新支援 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