基于vue的記事本應(yīng)用 vuememo - 更新

新版本更新支持 Markdown 形式的筆記,支持導(dǎo)出 .png 格式的筆記圖片,復(fù)制內(nèi)容到剪貼板方便分享,支持將所有筆記數(shù)據(jù)導(dǎo)出為 JSON 格式的文件等。

?? VUEMEMO

基于 Vue.js 的簡單記事本 SPA 。Mint-UI、Vue、VueRouter、Vuex,使用localStorage作為數(shù)據(jù)本地持久化,并支持使用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

點(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)行過濾 filter by completed
    • ??按創(chuàng)建時間排序 sort by timestamp
    • ??按類別進(jìn)行過濾 filter by type
    • ??收藏、取消收藏和顯示收藏筆記 star or unstar
    • ??通過 localStorage 對象的數(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í)時保存筆記 save note in real time
    • 定時推送提醒通知 notifications
    • 通過base64支持保存圖片 save the image via base64
    • 通過Canvas支持繪圖 draw in canvas

?? 文件目錄

├── App.vue
├── assets // 靜態(tài)資源
├── components // 組件
|  ├── Header.vue // 導(dǎo)航欄
|  ├── Index.vue // 主頁
|  ├── 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

?? MESSAGE ME

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容