Comment implémenter une conception de page de type Evernote dans Vue ?

Vue est un framework JavaScript populaire qui peut être utilisé pour créer des applications Web modernes. Vue offre un moyen simple de développer des interfaces utilisateur interactives riches, ce qui la rend de plus en plus populaire parmi de nombreux développeurs. Evernote est une application de prise de notes bien connue qui offre de nombreuses fonctionnalités et possède une conception d'interface très unique. Dans cet article, nous expliquerons comment utiliser Vue pour implémenter une conception de page de type Evernote.

1. Création d'une application Vue

Tout d'abord, nous allons créer une nouvelle application Vue. Vous pouvez utiliser Vue CLI pour créer une application Vue de base, exécutez simplement la commande suivante dans le terminal :

vue create my-app

Cela créera une nouvelle application Vue appelée "my-app".

2. Installer les dépendances nécessaires

Pour atteindre notre objectif, nous devons installer certaines dépendances nécessaires. Nous les installerons à l'aide de la commande suivante :

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

Cela installera les dépendances requises, notamment Vue-router, Vuex, FontAwesome et Bootstrap-Vue.

3. Création d'une mise en page

Ensuite, nous allons créer une mise en page de base que notre application utilisera. Nous allons créer une barre latérale gauche en utilisant un composant <navbar> et un composant <sidebar>. Cette barre latérale sera présentée sous la forme d'une liste contenant des blocs-notes et des balises. Sur le côté droit, nous allons créer un composant appelé « NoteView » qui affichera les détails de la note. <navbar> 组件和一个 <sidebar> 组件来创建一个左侧边栏。这个边栏将以列表的形式呈现，其中包含笔记本和标签。在右侧，我们将创建一个名为 “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. 实现左侧边栏

我们将使用 <sidebar> 组件来实现左侧边栏。在这个组件中，我们将呈现笔记本和标签以及添加笔记本或标签的选项。我们还将使用 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

Dans le composant principal de notre application, nous pouvons inclure ces composants en utilisant le code suivant :

<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. Ajouter le routage et la gestion de l'état Vuex

Maintenant, nous devons ajouter le routage et la gestion de l'état Vuex pour mettre en œuvre notre application. Nous utiliserons Vuex pour stocker les blocs-notes et les balises, et utiliserons le routage pour accéder à la page de détails du bloc-notes.

🎜Nous devons d'abord configurer quelques constantes, dans le fichier src/store/index.js nous pouvons ajouter le code suivant : 🎜rrreee🎜Ensuite, nous définirons notre état Vuex puis créerons un Stockez des fichiers pour gérer ces états. Dans le fichier src/store/state.js, nous pouvons ajouter le code suivant : 🎜rrreee🎜 Ensuite, nous devons mettre en place quelques actions et mutations pour mettre à jour les notebooks et notes dans la boutique. Dans le fichier src/store/mutations.js, on peut ajouter le code suivant : 🎜rrreee🎜 Dans le fichier src/store/actions.js, on peut ajouter le code suivant :🎜rrreee🎜Ensuite, dans le fichier src/router/index.js, nous devons configurer les routes pour naviguer au sein de notre application. Nous pouvons ajouter le code suivant : 🎜rrreee
🎜Implémentation de la barre latérale gauche🎜🎜🎜Nous utiliserons le composant <sidebar> pour implémenter la barre latérale gauche. Dans ce composant, nous présenterons des cahiers et des onglets ainsi que la possibilité d'ajouter des cahiers ou des onglets. Nous utiliserons également des icônes de FontAwesome pour différencier ces éléments. Vous pouvez ajouter le code suivant dans le fichier src/components/Sidebar.vue : 🎜rrreee
🎜Implémentation de la page de détails du notebook🎜🎜🎜Nous utiliserons un fichier appelé NoteView pour implémenter la page de détails du notebook. Dans ce composant, nous rendrons le titre et le contenu du cahier. Nous ajouterons également une zone de texte au bas du bloc-notes afin que les utilisateurs puissent ajouter des notes. Vous pouvez ajouter le code suivant dans le fichier src/components/NoteView.vue : 🎜rrreee🎜🎜Terminé🎜🎜🎜Maintenant, nous avons implémenté la conception de page de type Evernote dans l'application Vue. Nous utilisons des composants et du routage pour implémenter la barre latérale gauche et la page de détails des notes, et utilisons la gestion de l'état Vuex pour stocker les blocs-notes, les notes et les balises. Nous avons également utilisé FontAwesome et Bootstrap-Vue pour optimiser notre interface utilisateur. Plus de styles et de fonctionnalités peuvent être ajoutés et étendus sur la base de cette application Vue. 🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!