想象一下：你正在深入开发一个 Vue 项目，起初一切感觉顺畅简单。但随着应用的增长，你的文件夹开始泛滥，组件变得混乱，寻找文件就像大海捞针。听起来熟悉吗？

你并不孤单。一个有组织的文件结构是可扩展、可维护和高效前端开发的支柱。但关键问题是：没有一种放之四海而皆准的结构。完美的设置取决于你的项目规模、复杂性和团队动态。

那么，如何开始呢？如何平衡简单性和可扩展性？在本指南中，我将分解 Vue 3 项目的最优文件结构，涵盖从小规模应用到企业级设置的所有内容。让我们将文件混乱变为清晰。

1. 从 Vue CLI 默认结构开始

当你使用 Vue CLI 创建 Vue 项目时，你会得到一个基本的文件结构：

src/
├── assets/
├── components/
├── views/
├── router/
├── store/
├── App.vue
├── main.js

这个设置对于小型应用或原型设计效果很好，但随着你的应用增长，你需要重新考虑一些文件夹。让我们分析每一个，并看看我们如何可以改进。

2. 核心文件夹：解释和优化

assets/：「正确处理静态文件」这个文件夹用于你的项目静态资源，如图片、字体和样式。请记住这些提示：

assets/ ├── images/ ├── fonts/ ├── styles/

• 避免在这里混合特定于组件的资源。相反，将这些放置在相关的组件文件夹中。

components/：「模块化和组织」components/ 文件夹是魔法发生的地方。对于更大的项目，平面结构变得难以管理。逻辑上分组组件。

components/
├── common/   # 可复用的组件，如按钮、模态框等
├── layout/   # 头部、底部、侧边栏等
├── dashboard/ # 特定于仪表板功能的组件

「专业提示」：为共享组件添加“Base”前缀（例如，BaseButton.vue），以表示它们可以在应用中跨组件复用。

views/：「顶级页面」views/ 文件夹用于高级页面，通常与路由相关。这些页面通常将多个组件组合在一起。示例：

views/
├── Home.vue
├── About.vue
├── Dashboard.vue

「专业提示」：对于基于路由的组件使用懒加载以提高性能。

router/：「集中导航」这个文件夹管理你的应用导航。一个典型的 index.js 文件可能看起来像这样：

import { createRouter, createWebHistory } from 'vue-router';
import Home from '@/views/Home.vue';
const routes = [
  { path: '/', name: 'Home', component: Home },
  { path: '/about', name: 'About', component: () => import('@/views/About.vue') },
];
export default createRouter({
  history: createWebHistory(),
  routes,
});

「专业提示」：对于大型应用，将你的路由分割成模块并将它们导入到一个中央路由器文件中。

store/：「使用 Pinia 或 Vuex 进行状态管理」如果你的应用使用 Vuex 或 Pinia（我也将写一篇关于这些的博客），这个文件夹是你的全局状态所在。将你的状态分解成模块以提高可读性：

store/
├── index.js    # 主存储文件
├── auth.js     # 认证状态
├── products.js # 与产品相关的状态

3. 扩展：高级文件夹添加

随着你的应用增长，考虑添加这些文件夹以更好地组织：

composables/：「使用组合 API 复用逻辑」Vue 3 的组合 API 允许你将可复用的逻辑提取到自定义钩子中。例如：

// composables/useFetch.js
import { ref } from'vue';
exportfunction useFetch(url) {
const data = ref(null);
const error = ref(null);
  fetch(url)
    .then((response) => response.json())
    .then((json) => (data.value = json))
    .catch((err) => (error.value = err));
return { data, error };
}

services/：「API 调用和外部逻辑」集中你的 API 调用和外部集成以保持组件清洁：

// services/api.js
import axios from 'axios';
export const getProducts = () => axios.get('/api/products');
export const getUser = (id) => axios.get(`/api/users/${id}`);

types/：「类型定义（对于 TypeScript 用户）」如果你使用 TypeScript，在这里存储你的接口和类型。示例：

types/
├── User.ts
├── Product.ts

4. 文件命名最佳实践

• 文件使用小写连字符命名：user-profile.vue
• 为可复用组件添加 Base 前缀：BaseButton.vue
• 将相关文件分组在一起（例如，组件、样式、测试）。

5. 额外：真实案例

这是一个中到大型 Vue 3 项目的最终结构：

src/
├── assets/
├── components/
│   ├── common/
│   ├── layout/
│   ├── dashboard/
├── composables/
├── router/
├── services/
├── store/
├── types/
├── views/
├── App.vue
├── main.js

结论

一个经过深思熟虑的文件结构不仅仅是美观——它是构建一个优雅增长的项目，让你和你的团队生活更轻松的关键。有了这个指南，你将能够创建一个既可扩展又可维护的 Vue 3 项目结构。

那么，你的下一个项目会是什么样子呢？准备好将你的 Vue 混乱变为有序了吗？让我们开始构建吧！

原文地址：https://medium.com/@basak.karadeniz0/how-to-structure-your-vue-3-front-end-project-for-maximum-efficiency-9faa489dab4d

关注【前端小石匠】，一起学习，共同进步～

?近期热文

天呐！Git 仓库竟然能缩减 94%？！

【每日一学】CSS 中 width: 100% 的更好替代方案是它吗？

探索 React useEffect 的神秘面纱！

分享一个免费使用cursor的方法

20 个 TypeScript 技巧改变你的代码!

5 个进阶 React 性能优化技巧

10个高级JavaScript技巧