Vue3 目录结构

create-vue 生成的工程目录高度统一，看懂它就能快速定位任何文件。下面先给出一棵标准目录树，再逐项解释各部分的作用。

标准目录树

vue3-demo/
├── index.html            # HTML 入口
├── package.json          # 项目配置与脚本
├── vite.config.js        # 构建配置
├── public/               # 公共静态资源（原样复制）
├── src/                  # 源代码目录
│   ├── main.js           # 应用启动入口
│   ├── App.vue           # 根组件
│   ├── assets/           # 图片、样式等资源
│   ├── components/       # 公共组件
│   ├── views/            # 页面级组件（按需自行创建）
│   ├── router/           # 路由配置（启用后生成）
│   └── stores/           # Pinia 状态（启用后生成）
├── .vscode/              # 编辑器推荐配置
├── .gitignore            # Git 忽略规则
└── README.md             # 项目说明

src：日常开发主战场

绝大多数编码都发生在 src 下：

• main.js 创建并挂载应用；
• App.vue 是根组件，承载整体布局；
• components/ 放按钮、卡片等可复用组件；
• views/ 约定存放路由对应的整页组件；
• assets/ 里的图片、字体经打包处理；
• router/ 与 stores/ 在创建时勾选相应功能后自动生成。

public 与 assets 的区别

目录	处理方式	适用场景
public/	原样复制到 dist，引用用绝对路径 /logo.png	favicon、外部静态文件
assets/	经构建压缩并加内容哈希	组件内引用的图片、样式

组件中引用资源示例

<!-- 在任意 .vue 组件中引用 assets 图片 -->
<script setup>
import logo from './assets/logo.png'
</script>

<template>
  <img :src="logo" alt="logo" />
  <!-- public 下的图片直接用绝对路径 -->
  <img src="/favicon.ico" alt="icon" />
</template>

模板中用 :src 动态绑定，Vite 构建时会自动处理引用路径。

常用约定

• 可自行新增 utils/（工具函数）、hooks/（组合式函数）等目录。
• 组件文件建议大驼峰命名（HelloWorld.vue），模板内写作 <HelloWorld />。
• 页面与组件按职责分目录，避免全部堆在 App.vue 中。

小结

记住约定：src 放源码、public 放原样资源、components 放复用组件、views 放页面。遵循这套结构，大型项目的维护与协作都会顺畅很多。