Bagaimana untuk melaksanakan reka bentuk halaman seperti Evernote dalam Vue?-View.js-php.cn

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.

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

Salin selepas log masuk

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

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

Salin selepas log masuk

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

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>

Salin selepas log masuk

添加路由和 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'

Salin selepas log masuk

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

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

Salin selepas log masuk

接下来，我们需要设置一些动作和突变，来更新存储中的笔记本和笔记。在 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)
  }
}

Salin selepas log masuk

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

Salin selepas log masuk

接下来，在 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

Salin selepas log masuk

实现左侧边栏

我们将使用 <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>

Salin selepas log masuk

实现笔记本详细页面

我们将使用一个名为 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>

Salin selepas log masuk

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.

src/store/index.js

src/store/state.js

src/store/mutations.js

src/store/actions.js

src/router/index.js

<bar sisi>

src/components/Sidebar.vue

src/components/NoteView.vue

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!