可扩展的文件夹结构
合理组织大型 Vue 项目，便于维护
可扩展的文件夹结构 是 CoddyKit 上的免费 Vue Academy 课时。 这是第 3 节课，共 3 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 Vue Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 Vue Academy 课程共包含 3 节课。
结构很重要
当 Vue 应用不再只有几个文件时，您如何组织它将决定项目是否易于浏览、维护以及帮助新开发者上手。良好的结构可以扩展；混乱的结构则会拖慢所有人的进度。
按类型组织
按类型组织的方法会根据文件的类型进行分组：所有 component 放在一起，所有视图放在一起，所有状态存储放在一起。这种方法简单明了，非常适合小型到中型应用。
src/
components/
views/
stores/
composables/
router/按功能组织
按功能组织的方法会根据文件所属的功能进行分组。认证功能的所有内容都放在同一个文件夹中，因此大型应用更容易理解和维护。
src/
features/
auth/
LoginView.vue
useAuth.js
authStore.js
cart/
CartView.vue
cartStore.js选择组织方式
对于较小的应用，按类型组织非常合适。随着应用不断增长、功能越来越多，按功能组织可以让相关代码集中在一起，减少在不同文件夹之间来回查找。许多团队会先按类型组织，再随着规模扩大逐步迁移。
分离视图与 component
请区分视图（页面级、由路由控制的 component）与component（可复用的构建块）。这种分离方式可以清楚地表明哪些部分可以通过路由访问，哪些部分可以共享。
views/ // routed pages: HomeView.vue, AboutView.vue
components/ // reusable: BaseButton.vue, UserCard.vue组织可组合函数
请将可复用的组合式 API 逻辑放在 composables 文件夹中。使用 use 前缀命名，可以让人一眼看出它们的用途。
composables/
useAuth.js
useFetch.js
useLocalStorage.js组织状态存储
请将全局状态存储放在 stores 文件夹中，并为每个领域使用一个文件。这样可以更容易找到状态管理代码，也能保持模块化。
stores/
user.js
cart.js
settings.js命名约定
保持一致可以减少协作摩擦。请使用 PascalCase 命名 component 文件，为基础 component 添加 Base 前缀，并使用多词名称，以免与 HTML 元素冲突。
// components
BaseButton.vue
BaseInput.vue
UserProfileCard.vue
// composables
useAuth.js集中导出
集中导出是一个 index.js，它会重新导出文件夹中的内容，让使用方可以从一个路径导入，而不必从多个路径分别导入。
// composables/index.js
export { useAuth } from "./useAuth"
export { useFetch } from "./useFetch"从集中导出文件导入
有了集中导出文件，多个导入语句就可以合并为一行简洁的代码，从而提高可读性。
import { useAuth, useFetch } from "@/composables"保持一致
无论您选择哪种结构，都请始终如一地应用它，并将其记录在项目的 README 中。最好的结构是整个团队都理解并遵循的结构。随着应用增长，再逐步重构为按功能组织。
快速检查
检验您对文件夹结构的掌握情况。
回顾
较小的应用按类型组织，应用扩展后则按功能组织。请将由路由控制的视图与可复用的component分开，将可组合函数和状态存储放在各自的文件夹中，遵循一致的命名方式，并使用集中导出来实现整洁的导入。真正让结构具备可扩展性的，是面向团队记录并贯彻一致的规范。
常见问题解答
「可扩展的文件夹结构」课时是免费的吗？
是的 — 「可扩展的文件夹结构」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Vue Academy 课程的其余内容，请升级到 CoddyKit PRO。 Vue Academy 课程共包含 3 节课。
「可扩展的文件夹结构」这节课中我会学到什么？
合理组织大型 Vue 项目，便于维护 你通过在浏览器中直接运行的动手代码来练习 Vue Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。
学习 Vue Academy 需要有经验吗？
无需任何先前经验。CoddyKit 上的 Vue Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 3 节课，共 3 节。
「可扩展的文件夹结构」课时需要多长时间？
大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。
我能在这节 Vue Academy 课中编写并运行代码吗？
能。每节 Vue Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。