Vue.js Vue项目中的“视图”和“组件”文件夹之间有什么区别？

我刚刚使用命令行（

CLI

）初始化了一个Vue.js项目。

CLI

创建了一个

src/components

和

src/views

文件夹

我已经有几个月没有参与Vue项目了，文件夹结构对我来说似乎是新的

---

使用生成的Vue项目中的

视图

和

组件

文件夹之间有什么区别？

首先，两个文件夹

src/components

和

src/views

都包含Vue组件

关键区别在于某些Vue组件充当布线视图

在Vue中处理路由时，通常会定义路由，以便切换组件中使用的当前视图。这些路由通常位于

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

  like下面 企业样板
• 有些人称之为页面而不是视图
• 有些人的所有组件都在同一文件夹下

---

---

选择最适合您所从事项目的应用程序结构。我认为这更像是一种惯例。可重复使用的东西可以保存在src/components文件夹中，与路由器相关的东西可以保存在src/views中通常可重复使用的视图建议放在

src/components

目录中。例如页眉、页脚、广告、网格或任何自定义控件，如样式文本框或按钮。可以在视图中访问一个或多个零部件

一个视图可以有多个组件，而一个视图实际上是要通过导航url访问的。它们通常放置在

src/views

中

请记住，您不必通过url访问组件。您可以自由地将任何组件添加到

router.js

并访问它。但是如果您打算这样做，您可以将其移动到

src/views

而不是将其放置在

src/components

中

组件是类似于asp.net web窗体的用户控件

---

这只是为了更好地维护和可读性而对代码进行结构化。

两个文件夹基本相同，因为它们都包含组件，但Vue的美学思想是将用作页面（路由到类似页面以进行导航）的组件保存在

/views

文件夹中，而可重用组件（如表单字段）则保存在

/components

文件夹中。

src/views

通常用于通过路由器导航的应用程序中的主页面。

---

<代码> SRC/组件< /代码>用于在主页面中使用的可重用组件（在同一页面内或多个页面之间多次）

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

视图引用的动态性较低的接近静态的页面，组件下放置的内容更具可重用性和动态性。

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

我不认为它们是不同的，因为它们都是单文件视图组件。但是你的页面浏览量（Home.vue、About.vue、Checkout.vue）可以与你的组件（Button.vue、LoadingSpinner.vue等）分开。这就揭示了结构上的差异：@Jeff你是政治家，如果不是，你应该是。你只是重复了老年退休金计划的问题，但设法让它看起来像一个答案。哈哈，这是100%正确的。你可以用任何对你有意义的方式构造你的应用程序。我个人对所有路线都使用“src/pages”。在该文件夹中，我将为站点的每个“区域”创建子文件夹。例如“src/pages/questions”，在该文件夹中，我将有一个index.vue，其中包含问题列表。我将有一个add.vue，它将是添加问题等的页面。这些“页面”通常只是简单地组装所需的组件来组成“页面”。在我的“src/components”文件夹中，我将为导航、表单元素、自定义共享组件等创建子文件夹。我假设弹出窗口/模式窗口等组件按照此约定转到

src/components

？@Ricky，我可以请您看看Anthone Gore在《完整堆栈Vue.JS 2和Laravel 5》一书的github中与源代码相关的Vue.JS问题吗？特别是看一下OPC的编辑：部分我们可以说视图中的组件是组件的集合吗？例如，“我的列表视图”可以有多个组件，这些组件封装/包装在视图中的单个组件中？