Vue项目中的视图和组件文件夹有什么区别？

Question

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

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

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

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，它保持简单并提供灵活性。其目标是使不同技能水平的团队能够建立一个新项目并开始使用。

在一天结束时，这是一个方便和应用结构的问题。

• 有些人喜欢将src/router下的Views文件夹放在this企业样板文件中。
• 有些人称之为“页面”而不是“视图”。
• 有些人将所有组件放在同一个文件夹下。

---

Choose the application structure that best suits the project you are working on.

---

额外奖励：Dan Abramov为React和Vue项目推荐this文件结构。

Answer 2

我认为它更像是一个惯例。可重用的东西可以保存在src / components文件夹中，与路由器绑定的东西可以保存在src / views中