Vue에서 Evernote와 같은 페이지 디자인을 구현하는 방법은 무엇입니까?

Vue는 최신 웹 애플리케이션을 구축하는 데 사용할 수 있는 인기 있는 JavaScript 프레임워크입니다. Vue는 풍부한 대화형 UI를 개발할 수 있는 쉬운 방법을 제공하므로 많은 개발자들 사이에서 인기가 높아지고 있습니다. Evernote는 많은 기능을 제공하고 매우 독특한 인터페이스 디자인을 갖춘 잘 알려진 메모 작성 애플리케이션입니다. 이 글에서는 Vue를 사용하여 Evernote와 같은 페이지 디자인을 구현하는 방법을 소개합니다.

1. Creating a Vue 애플리케이션

먼저 새로운 Vue 애플리케이션을 생성하겠습니다. Vue CLI를 사용하여 기본 Vue 애플리케이션을 생성할 수 있습니다. 터미널에서 다음 명령을 실행하면 됩니다.

vue create my-app

이렇게 하면 "my-app"이라는 새로운 Vue 애플리케이션이 생성됩니다.

2. 필요한 종속성 설치

목표를 달성하려면 몇 가지 필수 종속성을 설치해야 합니다. 다음 명령을 사용하여 설치합니다.

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

이렇게 하면 Vue-router, Vuex, FontAwesome 및 Bootstrap-Vue를 포함한 필수 종속성이 설치됩니다.

3. 페이지 레이아웃 작성

다음으로, 애플리케이션에서 사용할 기본 페이지 레이아웃을 생성하겠습니다. <navbar> 구성 요소와 <sidebar> 구성 요소를 사용하여 왼쪽 사이드바를 만듭니다. 이 사이드바는 노트북과 태그가 포함된 목록으로 표시됩니다. 오른쪽에는 노트의 세부 정보를 표시하는 "NoteView"라는 구성 요소를 만듭니다. <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

우리 애플리케이션의 주요 구성 요소에는 다음 코드를 사용하여 이러한 구성 요소를 포함할 수 있습니다:

<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. 라우팅 및 Vuex 상태 관리 추가

이제 라우팅 및 Vuex 상태 관리를 추가해야 합니다. 우리의 응용 프로그램을 구현합니다. Vuex를 사용하여 노트북과 태그를 저장하고 라우팅을 사용하여 노트북의 세부 정보 페이지로 이동합니다.

🎜먼저 몇 가지 상수를 설정해야 합니다. src/store/index.js 파일에 다음 코드를 추가할 수 있습니다. 🎜rrreee🎜다음으로 Vuex 상태를 정의한 다음 이러한 상태를 관리하려면 파일을 저장하세요. src/store/state.js 파일에 다음 코드를 추가할 수 있습니다: 🎜rrreee🎜 다음으로 스토어의 노트북과 노트를 업데이트하기 위한 몇 가지 작업과 변형을 설정해야 합니다. src/store/mutations.js 파일에 다음 코드를 추가할 수 있습니다. 🎜rrreee🎜 src/store/actions.js 파일에 다음 코드를 추가할 수 있습니다. 다음 코드 :🎜rrreee🎜다음으로 src/router/index.js 파일에서 애플리케이션 내에서 탐색할 경로를 설정해야 합니다. 다음 코드를 추가할 수 있습니다: 🎜rrreee
🎜왼쪽 사이드바 구현🎜🎜🎜<sidebar> 구성 요소를 사용하여 왼쪽 사이드바를 구현하겠습니다. 이 구성 요소에서는 노트북 또는 탭을 추가하는 옵션과 함께 노트북 및 탭을 제공합니다. 또한 이러한 요소를 구별하기 위해 FontAwesome의 아이콘을 사용할 것입니다. src/comComponents/Sidebar.vue 파일에 다음 코드를 추가할 수 있습니다: 🎜rrreee
🎜노트북 세부 정보 페이지 구현🎜🎜🎜우리는 NoteView 구성 요소를 사용하여 노트북 세부 정보 페이지를 구현합니다. 이 구성 요소에서는 노트북의 제목과 내용을 렌더링합니다. 또한 사용자가 메모를 추가할 수 있도록 노트북 하단에 텍스트 상자를 추가할 것입니다. src/comComponents/NoteView.vue 파일에 다음 코드를 추가할 수 있습니다. 🎜rrreee🎜🎜Done🎜🎜🎜이제 Vue 애플리케이션에 Evernote와 유사한 페이지 디자인을 구현했습니다. 컴포넌트와 라우팅을 사용하여 왼쪽 사이드바와 노트 세부정보 페이지를 구현하고 Vuex 상태 관리를 사용하여 노트북, 노트, 태그를 저장합니다. 또한 FontAwesome과 Bootstrap-Vue를 사용하여 UI를 최적화했습니다. 이 Vue 애플리케이션을 기반으로 더 많은 스타일과 기능을 추가하고 확장할 수 있습니다. 🎜

위 내용은 Vue에서 Evernote와 같은 페이지 디자인을 구현하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!