vue.js - Vue 项目中的 views 和 components 文件夹有什么区别？

Question

我刚刚使用命令行 (CLI) 初始化了一个 Vue.js 项目。 CLI 创建了一个 src/components 和 src/views 文件夹。

自从我使用 Vue 项目以来已经有几个月了，文件夹结构对我来说似乎很陌生。

用 vue-cli 生成的 Vue 项目中的 views 和 components 文件夹有什么区别？ ？

Answer 1

首先，两个文件夹，src/components和 src/views , 包含 Vue 组件。

主要区别在于一些 Vue 组件充当路由的 View 。

在Vue中处理路由时，通常用Vue Router , 定义路由是为了切换 <router-view> 中使用的当前 View 成分。这些路线通常位于 src/router/routes.js ，我们可以看到这样的东西:

import Home from '@/views/Home.vue'
import About from '@/views/About.vue'

export default [
  {
    path: '/',
    name: 'home',
    component: Home,
  },
  {
    path: '/about',
    name: 'about',
    component: About,
  },
]

位于 src/components 下的组件不太可能在 route 使用，而位于 src/views 下的组件将被至少一条路线使用。

---

Vue CLI aims to be the standard tooling baseline for the Vue ecosystem. It ensures the various build tools work smoothly together with sensible defaults so you can focus on writing your app instead of spending days wrangling with configurations. At the same time, it still offers the flexibility to tweak the config of each tool without the need for ejecting.

Vue CLI 旨在快速开发 Vue.js，它使事情变得简单并提供灵 active 。它的目标是让不同技能水平的团队能够建立一个新项目并开始。

归根结底，这是一个便利性和应用程序结构的问题。

• 有些人喜欢将他们的 Views 文件夹放在 src/router 下喜欢 this企业样板。
• 有些人将其称为页面而不是 View 。
• 有些人将所有组件都放在同一个文件夹下。

---

选择最适合您正在从事的项目的应用程序结构。