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

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

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

首先，两个文件夹，src/components 和 src/views , 都是包含 Vue 组件。

主要区别在于一些 Vue 组件充当路由的视图 View 。

在Vue中处理路由时，通常用Vue Router , 定义路由是为了切换 <router-view> 中使用的当前 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 下的组件不太可能在 route 使用，而位于 src/views 下的组件将被至少一条路线使用。

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

通常建议将可重用的视图放置在src/components目录中。诸如页眉，页脚，广告，网格或任何自定义控件之类的示例，如样式化的文本框或按钮。可以在视图内部访问一个或多个组件。

一个视图可以具有一个或多个组件，并且一个视图实际上打算由导航URL访问。它们通常放置在中src/views。

请记住，您不受限制通过url访问组件。您可以随意将任何组件添加到中，router.js也可以对其进行访问。但是，如果您打算这样做，可以将其移至src/views而不是将其放置在中src/components。

组件是类似于asp.net Web表单的用户控件。它只是为了更好的维护和可读性而构造代码。

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