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

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

用Vue -cli生成的Vue项目中的视图和组件文件夹有什么区别?


当前回答

只是按逻辑顺序安排项目。您仍然可以在视图文件夹中创建组件,但这是分离项的更好方法,这样代码就不那么混乱了。

其他回答

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

首先,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下面 这是企业的样板。 有些人称之为页面而不是视图。 有些人将所有组件都放在同一个文件夹下。


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

我认为这更像是一种惯例。一些可重用的东西可以保存在src/components文件夹中,一些绑定到路由器的东西可以保存在src/views文件夹中

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

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