logo标签列表

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

vue.jsvuejs2vue-clivue-cli-3vue-cli-4
243

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

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

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

10
我认为它们在本质上没有区别，因为它们都是单文件视图组件。但是你的页面视图（Home.vue、About.vue、Checkout.vue等）可以与你的组件（Button.vue、LoadingSpinner.vue等）分开保存。 - Jeff
4
这篇文章阐述了结构上的差异：https://blog.pusher.com/new-vue-cli-simplifies-development/ - connexo
32
@Jeff，你是政治家吗？如果不是的话，你应该成为一个。你刚刚重复了Ops的问题，但还成功地让它看起来像是个答案。哈哈。 - PrestonDocks
4
@PrestonDocks 我认为他的回答在举例使用情况方面很有启发性。他指出视图是页面（主页、关于、结账），组件是页面的较小元素（按钮、加载旋转器等）。我认为这回答了问题。 - pantuofermo
15个回答
317
首先，两个文件夹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下，就像this企业样板一样。有些人称其为Pages而不是Views。有些人将所有组件放在同一个文件夹下。

选择最适合你正在开发的项目的应用程序结构。

14
这是100%正确的。您可以按照自己的方式构建应用程序。我个人使用“src/pages”来处理所有路由。在该文件夹中，我会为站点的每个“区域”创建一个子文件夹，例如“src/pages/questions”。在该文件夹中，我将拥有一个index.vue，其中包含问题列表。我会有一个add.vue，这将是添加问题的页面等等。这些“页面”通常只是组装所需的组件来组成“页面”。在我的“src/components”文件夹中，我将创建子文件夹来处理诸如导航、表单元素、自定义共享组件等事项... - Tim Wickstrom
我假设像弹出框/模态窗口这样的组件按照惯例放在 src/components 目录下？ - Simon Thiel
@Ricky，可以请你看一下与《Full-Stack Vue.js 2 and Laravel 5》一书的Github源代码相关的Vue.JS问题吗？问题链接在这里：https://stackoverflow.com/questions/59245577/laravel-vuejs-router-view-does-not-render-the-component？特别是要看一下OP的EDIT:部分。 - Istiaque Ahmed
我们可以说视图内部的组件是一组组件吗？例如，我的列表视图可以有多个组件，并且这些组件被包含/封装在视图中的单个组件中？ - Aayush
1
视图也是智能组件（容器组件），它们协调子组件的工作。视图通过props向子组件传递数据，监听事件，通过获取等方式改变状态。 - Maksim Shamihulau
53

我认为这更多是一种约定。可重复使用的内容可以放在src/components文件夹中，与路由相关的内容可以放在src/views中。

18

建议将通常可重复使用的视图放置在src/components目录中，例如头部、底部、广告、网格或任何自定义控件（如样式文本框或按钮）。一个视图中可以访问一个或多个组件。

视图可以有组件，实际上是通过导航url访问的。它们通常放置在src/views中。

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

组件类似于asp.net web forms中的用户控件。

这只是为了更好的维护和可读性来构造您的代码。

6

这两个文件夹基本相同，因为它们都包含组件，但Vue的美学在于将功能类似于页面（通过路由进行导航）的组件保存在/views文件夹中，而像表单字段这样可重复使用的组件则保存在/components文件夹中。

2

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

2

简单来说，视图用于路由，而组件是路由的组成部分。

1
你可以把视图看作页面，组件是可重用的代码块，你可以在任何页面或组件中使用它们（这两者都是Vue文件，这些术语只是为了演示）。
1

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

1

正如其他人所提到的那样，这很简单：您通常使用视图来实际导航用户想要的页面。组件是这些页面内的元素，您可以在项目的任何页面中重复使用它们。

1
较少动态的静态页面被称为视图，更可重复使用和动态的内容放置在组件下。
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接