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

Question

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

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

生成的Vue项目中的文件夹views和有什么区别？componentsvue-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像 这样的企业样板.
• 有些人称之为" 页面"而不是" 视图".
• 有些人将所有组件放在同一个文件夹下.

选择最适合您正在进行的项目的应用程序结构.

奖励:Dan Abramov为React和Vue项目推荐了这种文件结构.

Answer 2

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

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

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

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

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

Answer 3

我认为这更多是一种惯例。可重用的内容可以保存在src / components文件夹中，与路由器绑定的内容可以保存在src / views中

Answer 4

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