Vue.js 目录结构（超详细）

Vue.js 目录结构：从零开始理解项目骨架

当你第一次接触 Vue.js，看到一个新项目生成的文件夹结构时，可能会觉得有点眼花缭乱。别担心，这很正常。其实，Vue.js 的目录结构就像是一个精心设计的“房子蓝图”，每个文件夹和文件都有其明确的功能定位。掌握它，就像学会了看建筑图纸，后续开发会变得清晰而高效。

Vue.js 目录结构的设计遵循了现代前端工程的最佳实践，兼顾了可维护性、模块化和团队协作。无论你是初学者还是有一定经验的开发者，理解这个结构都能让你少走很多弯路。今天我们就来一步步拆解这个“房子蓝图”，帮你建立对 Vue.js 项目的整体认知。

项目根目录：项目的大门

当你使用 Vue CLI 创建一个项目时，会生成一个类似下面的根目录结构：

my-vue-project/
├── public/
├── src/
├── .eslintrc.js
├── babel.config.js
├── package.json
└── README.md

这个根目录就像你家的“院子”，里面包含了所有核心文件的入口。package.json 是项目的“身份证”，记录了依赖包、脚本命令和项目名称。你运行 npm install 的时候，就是根据这个文件去下载所需模块。

public/ 文件夹是静态资源的“仓库”，比如 index.html 就是整个应用的入口页面。它不会被 Webpack 编译，直接原样输出。你可以在这里设置页面标题、添加 meta 标签，或引入第三方库的 CDN 链接。

💡 小贴士：public/index.html 中的 <div id="app"></div> 就是 Vue 应用挂载的“锚点”。Vue 会把这个 DOM 节点作为根容器，把整个组件树渲染进去。

源码目录 src：项目的核心引擎

src/ 目录是整个项目真正的“心脏”，所有业务逻辑、组件、样式和脚本都集中在这里。它的结构设计直接影响代码的可读性和可维护性。

主入口文件 main.js

这是 Vue 应用的“启动按钮”。我们来看一段典型代码：

// src/main.js
import { createApp } from 'vue'  // 引入 Vue 的创建函数
import App from './App.vue'     // 引入根组件
import router from './router'   // 引入路由模块（如果有的话）
import store from './store'     // 引入状态管理（如果有的话）

// 创建 Vue 应用实例
const app = createApp(App)

// 挂载路由和状态管理（可选）
app.use(router)
app.use(store)

// 将应用挂载到 id 为 app 的 DOM 节点上
app.mount('#app')

✅ 注释说明：

  • createApp() 是 Vue 3.0 引入的新 API，用于创建应用实例。
  • App.vue 是根组件，整个页面的“顶层容器”。
  • app.use() 用于注册插件，比如路由、Vuex 等。
  • app.mount('#app') 是启动的关键，告诉 Vue 从哪里开始渲染。

组件目录 views 与 components

在大型项目中，我们通常会把组件分为两类：页面级组件 和 可复用组件。

  • views/ 文件夹用于存放“页面”组件，比如 Home.vue、About.vue，它们通常对应路由路径。
  • components/ 文件夹用于存放通用组件，比如 Button.vue、Card.vue，它们可以在多个页面中复用。
<!-- src/views/Home.vue -->
<template>
  <!-- 页面结构 -->
  <div class="home">
    <h1>欢迎来到首页</h1>
    <Counter /> <!-- 使用可复用组件 -->
  </div>
</template>

<script>
import Counter from '@/components/Counter.vue' // 引入组件

export default {
  name: 'Home', // 组件名称，用于调试和路由匹配
  components: {
    Counter // 注册组件
  }
}
</script>

<style scoped>
.home {
  text-align: center;
  padding: 20px;
}
</style>

✅ 注释说明：

  • @/ 是别名，指向 src/ 目录，避免写很长的相对路径。
  • scoped 样式只作用于当前组件，防止样式污染。
  • components 选项用于注册子组件，让模板能使用。

路由与状态管理：项目的导航与大脑

路由系统：让页面“动”起来

router/ 目录负责管理页面之间的跳转。Vue Router 是官方推荐的路由库。

// src/router/index.js
import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'
import AboutView from '../views/AboutView.vue'

// 定义路由映射表
const routes = [
  {
    path: '/',           // 路由路径
    name: 'Home',        // 路由名称，便于编程式跳转
    component: HomeView  // 对应的组件
  },
  {
    path: '/about',
    name: 'About',
    component: AboutView
  }
]

// 创建路由实例
const router = createRouter({
  history: createWebHistory(), // 使用 HTML5 History 模式
  routes
})

export default router

✅ 注释说明：

  • createWebHistory() 使用浏览器原生 History API，URL 看起来更“干净”。
  • routes 数组定义了路径与组件的映射关系。
  • 在模板中使用 <router-link to="/about"> 实现跳转。

状态管理：统一的数据中心

当项目复杂度上升，多个组件需要共享数据时，Vuex 或 Pinia 就派上用场了。这里以 Pinia 为例（推荐新项目使用）。

// src/store/index.js
import { createPinia } from 'pinia'

// 创建 Pinia 实例
const pinia = createPinia()

export default pinia

// src/store/modules/user.js
import { defineStore } from 'pinia'

// 定义一个 Store，用于管理用户数据
export const useUserStore = defineStore('user', {
  state: () => ({
    name: '',
    age: 0
  }),

  actions: {
    // 修改用户名
    setName(newName) {
      this.name = newName
    },

    // 增加年龄
    incrementAge() {
      this.age += 1
    }
  }
})

在组件中使用：

<script>
import { useUserStore } from '@/store/user'

export default {
  setup() {
    const userStore = useUserStore()

    return {
      userStore
    }
  }
}
</script>

✅ 注释说明：

  • defineStore() 是 Pinia 的核心 API，第一个参数是唯一 ID。
  • state 定义共享状态，actions 定义操作方法。
  • 在组件中通过 useUserStore() 获取实例，实现数据读写。

工具配置文件：项目的“说明书”

Babel 与 ESLint：代码质量守门员

  • babel.config.js：配置 Babel 转译规则，让现代 JavaScript 语法能在旧浏览器运行。
  • .eslintrc.js：配置 ESLint 规则，自动检查代码风格和潜在错误。
// babel.config.js
module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ]
}

// .eslintrc.js
module.exports = {
  root: true,
  env: {
    node: true
  },
  extends: [
    'plugin:vue/vue3-essential',
    'eslint:recommended'
  ],
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off'
  }
}

✅ 注释说明：

  • @vue/cli-plugin-babel/preset 是 Vue CLI 提供的标准预设。
  • ESLint 规则中，生产环境禁止 console.log 和 debugger，避免泄露调试信息。

构建与部署：从开发到上线

当你完成开发，运行 npm run build，Vue CLI 会自动打包所有文件，生成 dist/ 目录。这个目录下的文件可以直接部署到 Nginx、Vercel、GitHub Pages 等平台。

package.json 中的 scripts 字段定义了常用命令：

{
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  }
}

✅ 注释说明：

  • serve 启动本地开发服务器，支持热更新。
  • build 生成生产环境代码，压缩、优化、分包。
  • lint 检查代码规范，帮助团队保持一致风格。

总结：Vue.js 目录结构的本质

Vue.js 目录结构并不是随意设计的，而是经过长期实践沉淀下来的“标准答案”。它通过清晰的职责划分，让每个文件各司其职，就像一个高效的工厂流水线。

  • src/ 是核心生产区，存放所有可执行代码；
  • views/ 和 components/ 分离页面与组件，便于复用；
  • router/ 和 store/ 提供导航与状态管理，支撑复杂交互；
  • 配置文件保障代码质量，构建脚本实现自动化部署。

理解 Vue.js 目录结构，就是理解现代前端项目的“骨架”。当你能一眼看懂文件夹的含义，开发效率会显著提升。不要急于写代码，先花 10 分钟研究目录结构，你会发现，一切变得清晰而有序。

记住，一个好项目，始于一个好结构。希望这篇讲解能帮你建立对 Vue.js 目录结构的完整认知，让你在开发路上走得更稳、更远。