Wie implementiert man ein Evernote-ähnliches Seitendesign in Vue?

Vue ist ein beliebtes JavaScript-Framework, mit dem moderne Webanwendungen erstellt werden können. Vue bietet eine einfache Möglichkeit, umfangreiche interaktive Benutzeroberflächen zu entwickeln, was es bei vielen Entwicklern immer beliebter macht. Evernote ist eine bekannte Anwendung zum Notieren, die viele Funktionen bietet und über ein einzigartiges Interface-Design verfügt. In diesem Artikel stellen wir vor, wie Sie mit Vue ein Evernote-ähnliches Seitendesign implementieren.

1. Erstellen einer Vue-Anwendung

Zuerst erstellen wir eine neue Vue-Anwendung. Sie können die Vue-CLI verwenden, um eine grundlegende Vue-Anwendung zu erstellen. Führen Sie einfach den folgenden Befehl im Terminal aus:

vue create my-app

Dadurch wird eine neue Vue-Anwendung mit dem Namen „my-app“ erstellt.

2. Notwendige Abhängigkeiten installieren

Um unser Ziel zu erreichen, müssen wir einige notwendige Abhängigkeiten installieren. Wir werden sie mit dem folgenden Befehl installieren:

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

Dadurch werden die erforderlichen Abhängigkeiten installiert, einschließlich Vue-Router, Vuex, FontAwesome und Bootstrap-Vue.

3. Seitenlayout erstellen

Als Nächstes erstellen wir ein grundlegendes Seitenlayout, das unsere Anwendung verwenden wird. Wir erstellen eine linke Seitenleiste mit einer baa33d726332c2507b5c03acc8849f8f-Komponente und einer 198795fd54a215f0ecfa19e7b29c2ffb-Komponente. Diese Seitenleiste wird als Liste mit Notizbüchern und Tags angezeigt. Auf der rechten Seite erstellen wir eine Komponente namens „NoteView“, die die Details der Notiz anzeigt. baa33d726332c2507b5c03acc8849f8f 组件和一个 198795fd54a215f0ecfa19e7b29c2ffb 组件来创建一个左侧边栏。这个边栏将以列表的形式呈现，其中包含笔记本和标签。在右侧，我们将创建一个名为 “NoteView” 的组件，用于显示笔记的详细信息。

在我们的应用程序的主组件中，我们可以使用以下代码来包含这些组件：

<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. 添加路由和 Vuex 状态管理

现在，我们需要添加路由和 Vuex 状态管理来实现我们的应用程序。我们将使用 Vuex 存储笔记本和标签，并使用路由来跳转到笔记本的详细信息页面。

我们首先需要设置一些常量，在 src/store/index.js 文件中，我们可以添加以下代码：

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'

接下来，我们将定义我们的 Vuex 状态，然后创建一个存储文件来管理这些状态。在 src/store/state.js 文件中，我们可以添加以下代码：

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

接下来，我们需要设置一些动作和突变，来更新存储中的笔记本和笔记。在 src/store/mutations.js 文件中，我们可以添加以下代码：

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)
  }
}

在 src/store/actions.js 文件中，我们可以添加以下代码：

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)
    })
  }
}

接下来，在 src/router/index.js 文件中，我们需要设置路由，以在我们的应用程序中导航。我们可以添加以下代码：

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. 实现左侧边栏

我们将使用 198795fd54a215f0ecfa19e7b29c2ffb 组件来实现左侧边栏。在这个组件中，我们将呈现笔记本和标签以及添加笔记本或标签的选项。我们还将使用 FontAwesome 中的图标来对这些元素加以区分。您可以在 src/components/Sidebar.vue 文件中添加以下代码：

<template>
  <div class="col-lg-3">
    <div class="d-flex justify-content-between align-items-center mb-4">
      <h5 class="m-0">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 class="m-0">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. 实现笔记本详细页面

我们将使用一个名为 NoteView 的组件来实现笔记本详细信息页面。在这个组件中，我们将呈现笔记本的标题和内容。我们还将在笔记本的底部添加一个文本框，以便用户可以添加笔记。您可以在 src/components/NoteView.vue

In die Hauptkomponente unserer Anwendung können wir diese Komponenten mit dem folgenden Code einbinden:

<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>

4. Routing und Vuex-Statusverwaltung hinzufügen

Jetzt müssen wir Routing und Vuex-Statusverwaltung hinzufügen um unsere Anwendung umzusetzen. Wir verwenden Vuex zum Speichern von Notizbüchern und Tags und verwenden Routing, um zur Detailseite des Notizbuchs zu springen.

🎜Wir müssen zunächst einige Konstanten einrichten. In der Datei src/store/index.js können wir den folgenden Code hinzufügen: 🎜rrreee🎜Als nächstes definieren wir unseren Vuex-Status und erstellen dann einen Speichern Sie Dateien, um diese Zustände zu verwalten. In der Datei src/store/state.js können wir den folgenden Code hinzufügen: 🎜rrreee🎜 Als nächstes müssen wir einige Aktionen und Mutationen einrichten, um die Notizbücher und Notizen im Store zu aktualisieren. In der Datei src/store/mutations.js können wir den folgenden Code hinzufügen: 🎜rrreee🎜 In der Datei src/store/actions.js können wir Folgendes hinzufügen Folgender Code:🎜rrreee🎜Als nächstes müssen wir in der Datei src/router/index.js die Routen für die Navigation innerhalb unserer Anwendung einrichten. Wir können den folgenden Code hinzufügen: 🎜rrreee
🎜Implementierung der linken Seitenleiste🎜🎜🎜Wir werden die Komponente 198795fd54a215f0ecfa19e7b29c2ffb verwenden, um die linke Seitenleiste zu implementieren. In dieser Komponente stellen wir Notizbücher und Registerkarten sowie die Option zum Hinzufügen von Notizbüchern oder Registerkarten vor. Wir werden auch Symbole von FontAwesome verwenden, um diese Elemente zu unterscheiden. Sie können den folgenden Code in die Datei src/components/Sidebar.vue einfügen: 🎜rrreee
🎜Implementieren der Notebook-Detailseite🎜🎜🎜Wir verwenden eine Datei namens NoteView-Komponente zum Implementieren der Notizbuch-Detailseite. In dieser Komponente rendern wir den Titel und den Inhalt des Notizbuchs. Außerdem fügen wir am unteren Rand des Notizbuchs ein Textfeld hinzu, damit Benutzer Notizen hinzufügen können. Sie können den folgenden Code in die Datei src/components/NoteView.vue einfügen: 🎜rrreee🎜🎜Fertig🎜🎜🎜Jetzt haben wir das Evernote-ähnliche Seitendesign in der Vue-Anwendung implementiert. Wir verwenden Komponenten und Routing, um die linke Seitenleiste und die Notizdetailseite zu implementieren, und verwenden die Vuex-Statusverwaltung, um Notizbücher, Notizen und Tags zu speichern. Wir haben auch FontAwesome und Bootstrap-Vue verwendet, um unsere Benutzeroberfläche zu optimieren. Basierend auf dieser Vue-Anwendung können weitere Stile und Funktionen hinzugefügt und erweitert werden. 🎜

Das obige ist der detaillierte Inhalt vonWie implementiert man ein Evernote-ähnliches Seitendesign in Vue?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!