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

What is the difference between the views and components folders in a Vue project?

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

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

vue-cli生成的Vue项目中的viewscomponents文件夹有什么区别?

首先,src/componentssrc/views 这两个文件夹都包含 Vue 组件。

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

在Vue中处理路由的时候,一般都会用到Vue Router, routes are defined in order to switch the current view used in the <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 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 开发,它使事情变得简单并提供灵活性。它的目标是让不同技能水平的团队能够建立一个新项目并开始。

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

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

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

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

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

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

请记住,您并非只能通过 url 访问组件。您可以自由地将任何组件添加到 router.js 并访问它。但是如果你打算这样做,你可以将它移动到 src/views 而不是将它放在 src/components.

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

它只是关于构建您的代码以更好地维护和可读性。

这两个文件夹基本相同,因为它们都包含组件,但 Vue 的美感是将用作页面(路由到导航页面)的组件保存在 /views 文件夹中,而表单字段等可重用组件保存在 /components 文件夹中。

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

您可以考虑像页面和组件这样的视图是可重用的代码块,您可以在任何页面或组件中使用它们(都是 Vue 文件这些术语仅用于演示)

靠近静态页面的动态较少被称为视图,更多可重用和动态内容被放置在组件下。

很简单,视图是路由,而组件是路由的组件。

这两个文件夹都包含 Vue 组件,'views' 文件夹应该包含将导入其他组件的根级组件。所谓的 'other components' 位于 'components' 文件夹中。下面举个例子来说明。

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

  • yourname.com
  • 你的名字。com/about
  • 你的名字。com/price

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

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

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