196

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

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

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

4

11 回答 11

256

首先，两个文件夹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 文件夹放在这个企业样板文件下面。
  • 有些人称它为Pages而不是Views。
  • 有些人将所有组件都放在同一个文件夹下。

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

于 2018-06-14T21:24:09.347 回答
42

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

于 2019-03-06T21:48:52.980 回答
14

一般可重复使用的视图建议放在src/components目录中。页眉、页脚、广告、网格或任何自定义控件（如样式文本框或按钮）等示例。可以在视图中访问一个或多个组件。

视图可以包含组件，并且视图实际上旨在通过导航 url 访问。它们一般放置在src/views.

请记住，您不受限制通过 url 访问组件。您可以自由地将任何组件添加到router.js并访问它。但是，如果您打算这样做，您可以将其移动到 asrc/views而不是放置在src/components.

组件是类似于 asp.net 网络表单的用户控件。

它只是为了更好的维护和可读性构建你的代码。

于 2019-09-05T10:09:11.813 回答
4

两个文件夹基本相同，因为它们都包含组件，但 Vue 的美学在于将用作页面的组件（路由到类似页面进行导航）保存在/views文件夹中，而可重用组件（如表单字段）保存在/components文件夹中.

于 2020-07-13T13:01:16.510 回答
2

src/views通常用于您通过路由器导航的应用程序中的主页。 src/components用于您在主页面内使用的可重用组件（在同一页面内或跨不同页面多次）

于 2020-10-18T05:05:44.597 回答
1

您可以考虑像页面和组件这样的视图是可重用的代码块，您可以在任何页面或组件中使用（两者都是 Vue 文件，这些术语仅用于演示）

于 2020-11-26T12:49:06.523 回答
1

接近静态页面的较少动态被引用到视图，而更多可重用和动态内容被放置在组件下。

于 2021-02-11T11:14:32.860 回答
1

很简单，视图用于路由，而组件是路由的组件。

于 2021-05-12T11:24:54.333 回答
1

正如其他人所提到的，这非常简单：您通常将视图用于希望用户导航的实际页面。组件是那些页面中的元素，您可以在项目的任何页面中重用它们。

于 2021-08-20T18:08:23.317 回答
0

这两个文件夹都包含 Vue 组件，“views”文件夹应该包含将导入其他组件的根级组件。所谓的“其他组件”位于“组件”文件夹中。我们举一个例子来说明。

假设您的网站 yourname.com 有 3 个根级页面

  • yourname.com
  • yourname.com/about
  • yourname.com/price

您的“视图”文件夹将包含 3 个组件。“about.vue”、“index.vue”和“price.vue”。这些文件将被导入到你的路由文件中，或者可以直接导入到 app.vue 文件中进行路由。这些视图内部可能有多个组件，例如“price-card.vue”、“contact-card.vue”等。这些文件通常位于名为“组件”的文件夹中。您可以在“views”文件夹中的 vue 文件中导入这些组件，然后渲染它们。

于 2021-08-04T03:41:33.503 回答
0

在我看来，组件文件夹必须包含将在视图中使用的组件。在视图中，必须有路由器要访问的那些页面。例如，您的页面中有一个导航栏、页眉和页脚要使用，并且您有一个登录页面、注册页面和一个主页。然后你的 src/components 必须包含页眉、页脚和导航栏。在您的 src/views 中必须有诸如登录、注册和主文件之类的文件。

于 2022-02-19T21:56:22.530 回答