基于vue的记事本应用 vuememo - 更新
发布于 5 个月前 作者 oliyg 702 次浏览 来自 分享

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

回到顶部