How to implement Evernote-like page design in Vue?

Vue is a popular JavaScript framework that can be used to build modern web applications. Vue provides an easy way to develop rich interactive UIs, which makes it increasingly popular among many developers. Evernote is a well-known note-taking application that offers many features and has a very unique interface design. In this article, we will introduce how to use Vue to implement an Evernote-like page design.

1. Create a Vue application

First, we need to create a new Vue application. You can use the Vue CLI to create a basic Vue application by simply running the following command in the terminal:

vue create my-app

This will create a new Vue application called "my-app".

2. Install necessary dependencies

To achieve our goal, we need to install some necessary dependencies. We will install them using the following command:

npm install vue-router vuex vue-fontawesome bootstrap-vue

This will install the required dependencies including Vue-router, Vuex, FontAwesome and Bootstrap-Vue.

3. Building Page Layout

Next, we will create a basic page layout that our application will use. We will create a left sidebar using a <navbar></navbar> component and a <sidebar></sidebar> component. This sidebar will be presented as a list containing notebooks and tags. On the right side, we will create a component called "NoteView" that will display the details of the note.

In the main component of our application we can include these components using the following code:

<template>
  <div>
    <navbar />
    <div class="container-fluid mt-5">
      <div class="row">
        <sidebar />
        <note-view />
      </div>
    </div>
  </div>
</template>

<script>
import Navbar from '@/components/Navbar.vue'
import Sidebar from '@/components/Sidebar.vue'
import NoteView from '@/components/NoteView.vue'

export default {
  components: {
    Navbar,
    Sidebar,
    NoteView
  }
}
</script>

<style>
/* Visit https://bootstrap-vue.js.org/docs/ for BootstrapVue documentation and examples */
</style>

4. Add routing and Vuex state management

Now, we need to add routing and Vuex state management to our application. We’ll use Vuex to store notebooks and tags, and use routing to jump to the notebook’s details page.

We first need to set some constants. In the src/store/index.js file, we can add the following code:

export const SET_NOTEBOOKS = 'SET_NOTEBOOKS'
export const SET_NOTES = 'SET_NOTES'
export const SET_TAGS = 'SET_TAGS'
export const SET_ACTIVE_NOTEBOOK = 'SET_ACTIVE_NOTEBOOK'
export const SET_ACTIVE_NOTE = 'SET_ACTIVE_NOTE'
export const ADD_NOTEBOOK = 'ADD_NOTEBOOK'
export const ADD_NOTE = 'ADD_NOTE'
export const ADD_TAG = 'ADD_TAG'

Next, we will define our Vuex states, and then create a storage file to manage these states. In the src/store/state.js file, we can add the following code:

export default {
  notebooks: [],
  notes: [],
  tags: [],
  activeNotebook: null,
  activeNote: null
}

Next, we need to set up some actions and mutations to update the notebooks and notes in the store. In the src/store/mutations.js file, we can add the following code:

import {
  SET_NOTEBOOKS,
  SET_NOTES,
  SET_TAGS,
  SET_ACTIVE_NOTEBOOK,
  SET_ACTIVE_NOTE,
  ADD_NOTEBOOK,
  ADD_NOTE,
  ADD_TAG
} from './index'

export default {
  [SET_NOTEBOOKS](state, notebooks) {
    state.notebooks = notebooks
  },
  [SET_NOTES](state, notes) {
    state.notes = notes
  },
  [SET_TAGS](state, tags) {
    state.tags = tags
  },
  [SET_ACTIVE_NOTEBOOK](state, notebook) {
    state.activeNotebook = notebook
  },
  [SET_ACTIVE_NOTE](state, note) {
    state.activeNote = note
  },
  [ADD_NOTEBOOK](state, notebook) {
    state.notebooks.push(notebook)
  },
  [ADD_NOTE](state, note) {
    state.notes.push(note)
  },
  [ADD_TAG](state, tag) {
    state.tags.push(tag)
  }
}

In the src/store/actions.js file, we can add The following code:

import axios from 'axios'

import {
  SET_NOTEBOOKS,
  SET_NOTES,
  SET_TAGS,
  SET_ACTIVE_NOTEBOOK,
  SET_ACTIVE_NOTE,
  ADD_NOTEBOOK,
  ADD_NOTE,
  ADD_TAG
} from './index'

const api = 'https://my-json-server.typicode.com/abhinav1507/demo'

export default {
  getNotebooks({ commit }) {
    axios.get(`${api}/notebooks`).then(response => {
      commit(SET_NOTEBOOKS, response.data)
    })
  },
  getNotes({ commit }) {
    axios.get(`${api}/notes`).then(response => {
      commit(SET_NOTES, response.data)
    })
  },
  getTags({ commit }) {
    axios.get(`${api}/tags`).then(response => {
      commit(SET_TAGS, response.data)
    })
  },
  setActiveNotebook({ commit }, notebook) {
    commit(SET_ACTIVE_NOTEBOOK, notebook)
  },
  setActiveNote({ commit }, note) {
    commit(SET_ACTIVE_NOTE, note)
  },
  addNotebook({ commit }, notebook) {
    axios.post(`${api}/notebooks`, notebook).then(response => {
      commit(ADD_NOTEBOOK, response.data)
    })
  },
  addNote({ commit }, note) {
    axios.post(`${api}/notes`, note).then(response => {
      commit(ADD_NOTE, response.data)
    })
  },
  addTag({ commit }, tag) {
    axios.post(`${api}/tags`, tag).then(response => {
      commit(ADD_TAG, response.data)
    })
  }
}

Next, in the src/router/index.js file, we need to set up the routes to navigate within our application. We can add the following code:

import Vue from 'vue'
import Vuex from 'vuex'
import VueRouter from 'vue-router'

import Home from '@/views/Home.vue'
import Notebook from '@/views/Notebook.vue'

Vue.use(VueRouter)
Vue.use(Vuex)

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/notebook/:id',
    name: 'Notebook',
    component: Notebook
  }
]

const router = new VueRouter({
  routes
})

export default router

5. Implementing the left sidebar

We will use the <sidebar></sidebar> component to implement the left sidebar. In this component we will present notebooks and tabs along with the option to add notebooks or tabs. We'll also use icons from FontAwesome to differentiate these elements. You can add the following code in the src/components/Sidebar.vue file:

<template>
  <div class="col-lg-3">
    <div class="d-flex justify-content-between align-items-center mb-4">
      <h5 id="Notebooks">Notebooks</h5>
      <b-button variant="primary" size="sm">
        <font-awesome-icon :icon="['fas', 'plus']" />
        Add
      </b-button>
    </div>
    <b-list-group>
      <b-list-group-item v-for="notebook in notebooks" :key="notebook.id">
        <router-link :to="{ name: 'Notebook', params: { id: notebook.id}}">
          <font-awesome-icon :icon="['fas', 'book-open']" /> {{ notebook.title }}
        </router-link>
      </b-list-group-item>
    </b-list-group>
    <div class="d-flex justify-content-between align-items-center mt-4">
      <h5 id="Tags">Tags</h5>
      <b-button variant="primary" size="sm">
        <font-awesome-icon :icon="['fas', 'plus']" />
        Add
      </b-button>
    </div>
    <b-list-group>
      <b-list-group-item v-for="tag in tags" :key="tag.id">
        <font-awesome-icon :icon="['fas', 'tag']" /> {{ tag.title }}
      </b-list-group-item>
    </b-list-group>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'

export default {
  computed: {
    ...mapGetters({
      notebooks: 'notebooks',
      tags: 'tags'
    })
  }
}
</script>

6. Implementing the notebook detail page

We will use a name Implement the notebook details page for the NoteView component. In this component we will render the title and contents of the notebook. We'll also add a text box to the bottom of the notebook so users can add notes. You can add the following code in the src/components/NoteView.vue file:

<template>
  <div class="col-lg-9">
    <div class="d-flex justify-content-between align-items-center mb-4">
      <router-link :to="{ name: 'Home'}" class="btn btn-secondary">
        <font-awesome-icon :icon="['fas', 'arrow-left']" /> Back
      </router-link>
      <b-form-group label="Notebook" label-for="notebook">
        <b-form-select v-model="activeNotebook" :options="notebooks" id="notebook" />
      </b-form-group>
    </div>
    <div class="card">
      <div class="card-header">
        <input type="text" class="form-control" placeholder="Title">
      </div>
      <div class="card-body">
        <textarea class="form-control" placeholder="Note"></textarea>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters, mapActions } from 'vuex'

export default {
  computed: {
    ...mapGetters({
      notebooks: 'notebooks',
      activeNotebook: 'activeNotebook'
    })
  },
  methods: {
    ...mapActions({
      setActiveNotebook: 'setActiveNotebook'
    })
  },
  created() {
    if (!this.activeNotebook && this.notebooks.length) {
      this.setActiveNotebook(this.notebooks[0])
    }
  }
}
</script>

7. Done

Now, we have the Vue application A page design imitating Evernote is implemented. We use components and routing to implement the left sidebar and note details page, and use Vuex state management to store notebooks, notes, and tags. We also used FontAwesome and Bootstrap-Vue to optimize our UI. More styles and functionality can be added and extended based on this Vue application.

The above is the detailed content of How to implement Evernote-like page design in Vue?. For more information, please follow other related articles on the PHP Chinese website!