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

Question

我只是使用命令行（ CLI ）来初始化一个 Vue.js 项目。 CLI 创建了一个 src/components 和 src/views 文件夹。

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

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

原文由 drsnark 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

关键区别在于一些 Vue 组件充当路由的 _视图_。

在 Vue 中处理路由时，通常使用 Vue Router ，定义路由是为了切换 <router-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 下的组件不太可能在路由中使用，而位于 src/views 下的组件将被至少一个路由使用。

---

Vue CLI 旨在成为 Vue 生态系统的标准工具基线。它确保各种构建工具与合理的默认值一起顺利工作，因此您可以专注于编写应用程序，而不是花费数天时间与配置争吵。同时，它仍然可以灵活地调整每个工具的配置，而无需弹出。

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

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

• 有些人喜欢将他们的 Views 文件夹放在 src/router 下，就像 这个 企业样板。
• 有些人称它为 Pages 而不是 Views 。
• 有些人将所有组件都放在同一个文件夹下。

---

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

原文由 Ricky 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

我认为它更像是一种约定。可重用的东西可以保存在 src/components 文件夹中 与路由器相关的东西可以保存在 src/views 中

原文由 Ravi 发布，翻译遵循 CC BY-SA 4.0 许可协议