前言：看懂项目结构，才算真正入门

        很多人创建第一个 Vue 项目后，面对一堆文件和文件夹会陷入迷茫：src/assets 和 public 有啥区别？main.js 里的代码到底在做什么？App.vue 为什么是 "根组件"？

        其实，Vue 项目的目录结构是高度规范化的 —— 每个文件夹、每个文件都有明确的职责。本文就带你逐个拆解核心目录的作用，深入分析入口文件的初始化流程，配合直观的 SVG 图示，让你不仅 "会创建项目"，更能 "看懂项目"，为后续开发打下基础。

一、项目目录结构详解：每个文件都有明确分工

        无论是用 Vue CLI 还是 Vite 创建的 Vue 项目，核心目录结构基本一致（细微差异不影响整体理解）。我们以 Vite 创建的 Vue 3 项目为例，拆解最关键的目录和文件：

1. 项目根目录：全局配置与依赖

my-vue-project/          # 项目根目录
├─ node_modules/         # 项目依赖包（自动生成，不用手动改）
├─ public/               # 静态资源目录（不会被构建工具处理）
├─ src/                  # 源代码目录（开发的核心区域）
├─ .gitignore            # Git 忽略文件配置（如 node_modules）
├─ index.html            # 入口 HTML 文件（Vite 以 HTML 为入口）
├─ package.json          # 项目配置（依赖清单、脚本命令等）
├─ vite.config.js        # Vite 配置文件（打包、端口等设置）
└─ README.md             # 项目说明文档
  • node_modules/：存放通过 npm/yarn/pnpm 安装的依赖（如 Vue 核心库、Vite 等）。体积大，无需提交到 Git（.gitignore 已默认忽略）。
  • public/：存放 "不需要被构建工具处理" 的静态资源，比如 favicon.ico、robots.txt。打包时会原样复制到 dist 目录，访问时用绝对路径（如 /favicon.ico）。
  • package.json：项目的 "身份证"，记录项目名称、版本、依赖包、脚本命令（如 npm run dev 对应 "dev": "vite"）。

2. src 目录：开发的核心战场

src 是日常开发最常操作的目录，所有业务代码几乎都在这里：

src/
├─ assets/           # 被构建工具处理的静态资源
├─ components/       # 可复用的组件
├─ App.vue           # 根组件（整个应用的入口组件）
└─ main.js           # 入口 JS 文件（初始化 Vue 应用）
（1）src/assets/：被处理的静态资源

        存放图片、CSS、字体等资源，会被 Vite/Webpack 处理（如压缩图片、转译 CSS）。引用时用相对路径，例如：

<!-- 在组件中引用 assets 里的图片 -->
<template>
  <img src="./assets/logo.png" alt="logo">
</template>

和 public 的区别：

  • assets 里的资源会被构建工具 "加工"（比如图片被压缩、重命名），最终路径可能变化（如 logo.hash.png）。
  • public 里的资源 "原样复制"，路径固定（如 public/logo.png 访问时用 /logo.png）。

（2）src/components/：可复用的组件

        存放自定义组件（如按钮、卡片、表单等），这些组件可以在其他组件中重复使用。例如创建 src/components/Hello.vue：

<template>
  <div class="hello">
    <h2>{{ msg }}</h2>
  </div>
</template>

<script>
export default {
  props: { msg: String } // 接收父组件传递的 msg
}
</script>

使用时在其他组件（如 App.vue）中引入并注册：

<template>
  <div>
    <Hello msg="Hello 组件"/> <!-- 使用组件 -->
  </div>
</template>

<script>
import Hello from './components/Hello.vue' // 引入组件
export default {
  components: { Hello } // 注册组件
}
</script>
（3）App.vue：根组件

整个应用的 "顶层组件"，所有页面内容都通过它组合呈现。它由三部分组成：

  • <template>：组件的 HTML 结构（必须有一个根元素，通常用 <div id="app"> 包裹）。
  • <script>：组件的逻辑（数据、方法、引入其他组件等）。
  • <style>：组件的样式（可加 scoped 让样式只作用于当前组件）。

示例 App.vue：

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <Hello msg="Welcome to Your Vue.js App"/>
  </div>
</template>

<script>
import Hello from './components/Hello.vue'
export default {
  name: 'App',
  components: { Hello }
}
</script>

<style scoped>
#app { text-align: center; }
</style>
（4）src/main.js：入口 JS 文件

整个应用的 "启动器"，负责初始化 Vue 实例、挂载根组件到 DOM。我们会在下一部分详细解析。

3. 其他常见目录（项目扩展时会用到）

随着项目复杂度提升，还会添加这些目录：

  • src/views/：页面级组件（与路由对应，如首页、详情页），区别于 components（通用组件）。
  • src/router/：路由配置（Vue Router），管理页面跳转。
  • src/store/：状态管理（Pinia/Vuex），存放全局数据（如用户信息、购物车）。
  • src/utils/：工具函数（如请求封装、日期格式化）。

二、入口文件深度解析：main.js 是如何启动应用的？

   main.js（或 TypeScript 项目的 main.ts）是 Vue 应用的 "入口点"，它的代码虽然少，但串联起了整个应用的初始化流程。我们以 Vue 3 为例，逐行拆解：

1. Vue 3 入口文件（main.js）代码

// 1. 引入 Vue 核心函数和根组件
import { createApp } from 'vue'
import App from './App.vue'

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

// 3. 挂载应用到 DOM（id 为 app 的元素）
app.mount('#app')

这三行代码完成了从 "创建应用" 到 "显示页面" 的全过程，我们拆解每一步的作用：

步骤 1：引入核心依赖
  • import { createApp } from 'vue'：从 Vue 核心库引入 createApp 函数，它用于创建 Vue 应用实例（Vue 3 新增，替代 Vue 2 的 new Vue()）。
  • import App from './App.vue'：引入根组件 App.vue，后续会将它作为整个应用的顶层组件。
步骤 2：创建应用实例

   const app = createApp(App) 会创建一个 Vue 应用实例（app），并将 App 组件作为应用的 "根组件"。

        这个实例（app）是应用的 "总控制器"，可以通过它注册全局组件、指令、插件（如路由、状态管理）：

// 示例：注册全局组件
import MyButton from './components/MyButton.vue'
app.component('MyButton', MyButton) // 全局可用 <MyButton/>

// 示例：使用路由插件
import router from './router'
app.use(router)
步骤 3：挂载应用到 DOM

app.mount('#app') 是最后一步，它会将应用实例渲染到页面中 id="app" 的 DOM 元素上。

对应的 HTML 元素在 index.html 中：

<!-- index.html -->
<body>
  <div id="app"></div> <!-- Vue 应用会挂载到这里 -->
  <script type="module" src="/src/main.js"></script>
</body>

挂载时会发生什么？

  • Vue 会解析根组件（App.vue）的模板，生成对应的 DOM 结构。
  • 将生成的 DOM 替换掉 <div id="app"></div>，最终显示页面内容。

2. 初始化流程图示

整个过程可以用流程图直观展示：

3. Vue 2 vs Vue 3 入口文件差异

如果接触过 Vue 2，会发现入口文件写法不同，核心区别在于 "创建实例" 的方式：

  • Vue 2：用 new Vue() 创建实例，通过 el 指定挂载点，components 注册根组件：

    import Vue from 'vue'
import App from './App.vue'

new Vue({
  el: '#app',
  components: { App }, // 注册根组件
  template: '<App/>'   // 渲染根组件
})

  • Vue 3：用 createApp 函数创建实例，链式调用 mount 挂载，更简洁：

    import { createApp } from 'vue'
import App from './App.vue'

createApp(App).mount('#app') // 链式写法

        本质上两者都是将根组件渲染到指定 DOM，但 Vue 3 的 createApp 实现了更好的隔离性（多个应用实例互不影响），更适合复杂场景。

三、从 "文件" 到 "页面"：整体流程梳理

当你运行 npm run dev 后，整个应用从启动到显示的完整流程是：

  1. 启动开发服务器：Vite 启动本地服务器（默认 5173 端口），监听文件变化。
  2. 加载入口 HTML：浏览器访问 http://localhost:5173，加载 index.html。
  3. 执行入口 JS：index.html 引入 main.js，执行其中的代码：
    • 引入 Vue 和 App 组件 → 创建应用实例 → 挂载到 #app。
  4. 渲染组件：Vue 解析 App.vue 的模板，将其中的内容（如 assets 里的图片、components 里的组件）渲染成 DOM。
  5. 显示页面：最终渲染的 DOM 替换 #app 元素，页面显示内容。

总结：核心文件的 "职责地图"

通过本文的解析，你应该能清晰回答这些问题：

  • 静态资源放 assets 还是 public？→ 需处理的放 assets，原样使用的放 public。
  • 通用组件写在哪里？→ src/components/，并在使用的地方引入注册。
  • App.vue 是什么？→ 根组件，所有内容都通过它组合。
  • main.js 做了什么？→ 引入依赖→创建应用→挂载到 DOM，完成应用初始化。

        理解这些基础后，后续学习组件通信、路由、状态管理时，你会更清楚 "代码该写在哪里"、"数据如何流转"。下一篇我们将深入 Vue 组件的核心语法，敬请关注！

# vue.js # javascript # ecmascript
Logo
松山湖开发者村综合服务平台

助力广东及东莞地区开发者，代码托管、在线学习与竞赛、技术交流与分享、资源共享、职业发展，成为松山湖开发者首选的工作与学习平台

更多推荐

cover

【案例分享】华为云&生益科技打造生益科技工业级 AI 智能体平台

avatar 松山湖开发者村综合服务平台
cover

【案例分享】华为云 & 泊松软件联合打造东博智能xInteXDM 研发管理平台

avatar 松山湖开发者村综合服务平台
cover

【案例分享】以数智员工赋能阿普邦新材料产业提速高质量发展

avatar 松山湖开发者村综合服务平台