Bagaimana untuk melaksanakan reka bentuk halaman seperti Evernote dalam Vue?

Vue ialah rangka kerja JavaScript popular yang boleh digunakan untuk membina aplikasi web moden. Vue menyediakan cara mudah untuk membangunkan UI interaktif yang kaya, yang menjadikannya semakin popular di kalangan banyak pembangun. Evernote ialah aplikasi pengambilan nota terkenal yang menawarkan banyak ciri dan mempunyai reka bentuk antara muka yang sangat unik. Dalam artikel ini, kami akan memperkenalkan cara menggunakan Vue untuk melaksanakan reka bentuk halaman seperti Evernote.

1. Membuat Aplikasi Vue

Pertama, kami akan mencipta aplikasi Vue baharu. Anda boleh menggunakan Vue CLI untuk mencipta aplikasi Vue asas, cuma jalankan arahan berikut dalam terminal:

vue create my-app

Ini akan mencipta aplikasi Vue baharu yang dipanggil "aplikasi saya".

2. Pasang kebergantungan yang diperlukan

Untuk mencapai matlamat kami, kami perlu memasang beberapa kebergantungan yang diperlukan. Kami akan memasangnya menggunakan arahan berikut:

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

Ini akan memasang kebergantungan yang diperlukan termasuk Vue-router, Vuex, FontAwesome dan Bootstrap-Vue.

3. Layout Halaman Bangunan

Seterusnya, kami akan membuat susun atur halaman asas yang akan digunakan oleh aplikasi kami. Kami akan membuat bar sisi kiri menggunakan komponen <navbar> dan komponen <bar sisi>. Bar sisi ini akan dibentangkan sebagai senarai yang mengandungi buku nota dan tag. Di sebelah kanan, kami akan mencipta komponen yang dipanggil "NoteView" yang akan memaparkan butiran nota. <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

Dalam komponen utama aplikasi kami, kami boleh memasukkan komponen ini menggunakan kod berikut:

<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. Tambah penghalaan dan pengurusan keadaan Vuex

Sekarang, kami perlu menambah penghalaan dan pengurusan Negeri Vuex untuk melaksanakan permohonan kami. Kami akan menggunakan Vuex untuk menyimpan buku nota dan teg, dan menggunakan penghalaan untuk melompat ke halaman butiran buku nota.

🎜Kita perlu menyediakan beberapa pemalar terlebih dahulu, dalam fail src/store/index.js kita boleh menambah kod berikut: 🎜rrreee🎜Seterusnya, kita akan menentukan keadaan Vuex kita dan kemudian mencipta Simpan fail untuk mengurus keadaan ini. Dalam fail src/store/state.js, kita boleh menambah kod berikut: 🎜rrreee🎜 Seterusnya, kita perlu menyediakan beberapa tindakan dan mutasi untuk mengemas kini buku nota dan nota dalam stor. Dalam fail src/store/mutations.js, kita boleh menambah kod berikut: 🎜rrreee🎜 Dalam fail src/store/actions.js, kita boleh menambah kod berikut :🎜rrreee🎜Seterusnya, dalam fail src/router/index.js, kami perlu menyediakan laluan untuk menavigasi dalam aplikasi kami. Kami boleh menambah kod berikut: 🎜rrreee
🎜Melaksanakan bar sisi kiri🎜🎜🎜Kami akan menggunakan komponen <bar sisi> untuk melaksanakan bar sisi kiri. Dalam komponen ini kami akan membentangkan buku nota dan tab bersama-sama dengan pilihan untuk menambah buku nota atau tab. Kami juga akan menggunakan ikon daripada FontAwesome untuk membezakan elemen ini. Anda boleh menambah kod berikut dalam fail src/components/Sidebar.vue: 🎜rrreee
🎜Melaksanakan halaman butiran buku nota🎜🎜🎜Kami akan menggunakan fail bernama NoteView komponen untuk melaksanakan halaman butiran buku nota. Dalam komponen ini kami akan memaparkan tajuk dan kandungan buku nota. Kami juga akan menambah kotak teks ke bahagian bawah buku nota supaya pengguna boleh menambah nota. Anda boleh menambah kod berikut dalam fail src/components/NoteView.vue: 🎜rrreee🎜🎜Done🎜🎜🎜Kini, kami telah melaksanakan reka bentuk halaman seperti Evernote dalam aplikasi Vue. Kami menggunakan komponen dan penghalaan untuk melaksanakan bar sisi kiri dan halaman butiran nota, dan menggunakan pengurusan keadaan Vuex untuk menyimpan buku nota, nota dan teg. Kami juga menggunakan FontAwesome dan Bootstrap-Vue untuk mengoptimumkan UI kami. Lebih banyak gaya dan fungsi boleh ditambah dan dilanjutkan berdasarkan aplikasi Vue ini. 🎜

Atas ialah kandungan terperinci Bagaimana untuk melaksanakan reka bentuk halaman seperti Evernote dalam Vue?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!