刚用命令行（CLI）初始化了一个 Vue.js 项目。CLI 创建了一个 src/components 以及 src/views 目录。

我已经在 Vue 项目下工作数月，但这种文件结构对我来说依然有种不熟悉的感觉。

通过 vue-cli 生成的 Vue 项目中的 views 和 components 目录究竟有何区别？

Ricky 答到:

首先，两个目录 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 下，就像 这样 的企业模板。

• 有些人喜欢将其置于 Pages 而不是 Views。

• 有些人会把所有组件放到同一个文件夹下。

• ---

选择最适合你项目的代码结构。

评论：

• 完全正确。你可以按照具体的场景去组织应用代码。个人将所有路由组件放到 “src/pages” 中。在该目录中，我将为站点的每个“域”创建一个子目录。比如在 “src/pages/questions” 中，我将创建一个用于列表展示的 index.vue。还会新增一个用于新增问题的 add.vue 组件等。这些 “页面” 通常都是通过简单的组件拼装而成的。在我的 “src/components” 目录下，我通常会创建一些子目录用于存放导航、表单元素、自定义的可共享组件等。

• 我猜组件就像 弹出框、模态框，这些会放到 src/components以便调用？

• @Ricky，我能请你看一个与 Vue.JS 源码相关的问题么，在一本 GitHub 托管的书 “Vue.js2 和 Laravel 5 全栈式开发”，链接在此：stackoverflow.com/questions/59245577/…？特别是要看下 OP 的 EDIT 部分。

• 我们是否能说 views 下的组件是组件的集合？举个例子，我的列表视图可以由多个组件组成，那么这些组件就是在 view 组件中被包装成单个组件的？

navule 答道:

通常来讲，我们建议将可重用 视图组件 放在目录 src/components 下。例如页眉、页脚、广告、网格或者其他的自定义组件，如带自定义样式的文本框或者按钮等。可以在视图内访问一个或者多个组件。

一个视图可以有多个组件，并且他们是通过路由 URL 来进行访问的，他们通常放在 src/views 目录下。

请注意，路由 URL 访问的组件不受任何限制，你可以任意添加组件到 router.js 中，并且对其进行访问。但如果你想这样做，你最好将需要被路由访问的组件移动到 src/views 目录中，而不是将其放入 src/components 中。

组件类似于 ASP.NET 中的 WEB 用户表单控件。
（译者补充：你也可以理解成将更多的 HTML 标签和更多的业务逻辑封装成为了一个标签供我们使用）

其实，这样做的目的也是为了项目能够被更好的维护和代码的可读性而对代码进行的结构化处理。

本文中的所有译文仅用于学习和交流目的，转载请务必注明文章译者、出处、和本文链接
我们的翻译工作遵照 CC 协议，如果我们的工作有侵犯到您的权益，请及时联系我们。

原文地址：https://stackoverflow.com/questions/5086...

译文地址：https://learnku.com/vuejs/t/53963