新版本更新支持 Markdown 形式的筆記柄慰,支持導(dǎo)出 .png 格式的筆記圖片茁计,復(fù)制內(nèi)容到剪貼板方便分享,支持將所有筆記數(shù)據(jù)導(dǎo)出為 JSON 格式的文件等漩勤。
?? VUEMEMO
基于 Vue.js 的簡(jiǎn)單記事本 SPA 笙以。Mint-UI淌实、Vue、VueRouter猖腕、Vuex拆祈,使用localStorage作為數(shù)據(jù)本地持久化,并支持使用Markdown格式筆記谈息,主要功能有增查改刪筆記缘屹、按條件過(guò)濾和排序筆記、并支持文字和圖片等形式的筆記.
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
點(diǎn)擊這里看演示:DEMO
源代碼:github
?? BUILD SETUP
# 安裝依賴
npm install
# 開發(fā)模式localhost:8080
npm run dev
# 打包構(gòu)建
npm run build
?? 主要功能
- v1
- ??響應(yīng)適配 Responsive
- ??創(chuàng)建侠仇、修改筆記 create or modify notes
- ??刪除部分或全部筆記 delete notes or drop all data
- ??查看筆記詳細(xì)內(nèi)容 read the note content
- ??標(biāo)記筆記是否完成 check if completed
- ??切換筆記顯示模式 switch display mode
- v2
- ??按是否完成進(jìn)行過(guò)濾 filter by completed
- ??按創(chuàng)建時(shí)間排序 sort by timestamp
- ??按類別進(jìn)行過(guò)濾 filter by type
- ??收藏、取消收藏和顯示收藏筆記 star or unstar
- ??通過(guò) localStorage 對(duì)象的數(shù)據(jù)本地持久化 user data stored in localStorage
- v3
- ??支持Markdown格式 support Markdown
- ??以圖片的形式保存筆記 save note as img(.png)
- ??復(fù)制筆記內(nèi)容到剪貼板 Copy the note content to clipboard
- ??導(dǎo)出全部筆記至 JSON 文件格式(Blob) export all notes to JSON file
- v4
- 實(shí)時(shí)保存筆記 save note in real time
- 定時(shí)推送提醒通知 notifications
- 通過(guò)base64支持保存圖片 save the image via base64
- 通過(guò)Canvas支持繪圖 draw in canvas
?? 文件目錄
├── App.vue
├── assets // 靜態(tài)資源
├── components // 組件
| ├── Header.vue // 導(dǎo)航欄
| ├── Index.vue // 主頁(yè)
| ├── MemoItem.vue // 筆記文檔
| ├── ModifyMemo.vue // 修改筆記界面
| ├── NewMemo.vue // 新建筆記界面
| ├── Preview.vue // 預(yù)覽 MD 筆記
| ├── ShowMemo.vue // 查看筆記界面
| └── Tabbar.vue // tabbar欄
├── main.js
├── router // 路由
| └── index.js
├── store // 全局 store 管理
| ├── action.js
| ├── index.js
| └── mutation.js
└── utils // 全局共用方法
└── index.js