New version supports Markdown format of notes, export. PNG file of notes, copy content to clipboard for easy sharing, and export all note data to JSON file.

💯 VUEMEMO

Simple notepad SPA based on vue.js. Mint-ui, Vue, VueRouter, Vuex, uses localStorage as the local data persistence, and supports Markdown format notes. The main functions include adding, modifying, deleting notes, filtering and sorting notes by conditions, and supporting text and image notes.

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

Click here to see the DEMO

Source code: Github

🚨 BUILD SETUP

# install dependencies
npm install
Localhost :8080
npm run dev
# Package build
npm run build
Copy the code

🎯 Main Functions

  • v1
    • ✔️ Responsive
    • ✔️ Create or modify notes
    • ✔️ Delete some or all notes delete notes or drop all data
    • ✔️ Read the note content
    • ✔️ Indicates whether notes are completed check if completed
    • ✔️ Switch the note display mode
  • v2
    • ✔️ Filter by completed
    • ✔️ Sort by creation time sort by timestamp
    • ✔️ Filter by type filter by type
    • ✔️ Favorites, unfavorites and show favorites notes star or unstar
    • ✔️ Locally persists user data stored in localStorage through the data of the localStorage object
  • v3
    • ✔️ Markdown format Support Markdown
    • ✔️ Save notes as img(.png)
    • ✔️ Copy notes to clipboard Copy the note content to clipboard
    • ✔️ Export all notes to JSON file in Blob format
  • v4
    • Save notes in real time
    • Notifications are notifications that are periodically pushed
    • Save the image via Base64
    • Support drawing draw in Canvas via Canvas

📦 File Directory

├ ─ ─ App. Vue ├ ─ ─ assets/resources/static ├ ─ ─ the components / / component | ├ ─ ─ the Header. The vue / / navigation bar | ├ ─ ─ Index. The vue / / homepage | ├ ─ ─ MemoItem. Vue / / Notes document | ├ ─ ─ ModifyMemo. Vue/modify/notes interface | ├ ─ ─ NewMemo. Vue / / new notes interface | ├ ─ ─ the Preview. The vue/MD/Preview notes | ├ ─ ─ ShowMemo. Vue / / See notes interface | └ ─ ─ Tabbar. Vue / / Tabbar bar ├ ─ ─ main. Js ├ ─ ─ the router / / routing | └ ─ ─ index. The js ├ ─ ─ store / / global store management | ├ ─ ─ action. Js | ├ ─ ─ index. Js | └ ─ ─ mutation. Js └ ─ ─ utils / / global sharing method └ ─ ─ index, jsCopy the code

🍎 MESSAGE ME

  • github
  • blog
  • email