Vue 3 项目结构详解：每个文件是干什么的
Vue 3 项目结构详解：每个文件是干什么的
上篇我们创建了一个 Vue 项目，跑起来了。这篇来说说这些文件都是干嘛的。
我当年学的时候，看别人项目一脸懵，文件一堆，不知道从哪看起。现在我把每个目录和关键文件都讲一遍，你再打开项目就不会迷茫了。
整体目录结构
vue3-getting-started/
├── public/ # 静态资源
├── src/ # 源代码（主要写这里）
│ ├── assets/ # 样式、图片等资源
│ ├── components/ # 组件
│ ├── App.vue # 根组件
│ └── main.ts # 入口文件
├── index.html # HTML 入口
├── package.json # 项目配置
├── tsconfig.json # TypeScript 配置
├── vite.config.ts # Vite 构建配置
└── README.md # 项目说明
index.html：页面的起点
这是整个 Vue 应用的 HTML 入口。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<link rel="icon" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vue 3</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.ts"></script>
</body>
</html>
关键点只有一个：<div id="app"></div>。这是 Vue 应用的挂载点，Vue 会把内容渲染到这个 div 里。
/src/main.ts 是入口文件引用。
src/main.ts：应用的入口
import { createApp } from 'vue'
import App from './App.vue'
import './assets/main.css'
const app = createApp(App)
app.mount('#app')
这四行代码做了：
- 导入
createApp函数，这是 Vue 3 创建应用的方法 - 导入根组件
App.vue - 导入全局样式
- 创建应用并挂载到
#app
main.ts 是应用最先运行的地方，一般不需要改。
src/App.vue：根组件
这是你看到的页面内容的"根"。其他组件都嵌套在里面。
<script setup lang="ts">
import HelloWorld from './components/HelloWorld.vue'
</script>
<template>
<header>
<img alt="Vue logo" class="logo" src="./assets/logo.svg" />
<div class="wrapper">
<HelloWorld msg="Vite + Vue 3" />
</div>
</header>
</template>
<style scoped>
header { /* ... */ }
</style>
三个部分：
<script setup>：写逻辑的地方，这里导入了 HelloWorld 组件<template>：写 HTML 结构的地方<style scoped>：写样式的地方，scoped表示样式只对这个组件生效
src/components/：放组件的地方
组件就是可以被重复使用的 Vue 页面片段。
比如 HelloWorld.vue 是一个组件，你可以在 App.vue 里多次使用它：
<HelloWorld msg="你好" />
<HelloWorld msg="世界" />
每次使用，Vue 都会创建一个独立的组件实例。
项目中组件都放这里，命名规范是PascalCase（首字母大写），比如 UserCard.vue、HeaderNav.vue。
src/assets/：静态资源
放样式、图片、字体等不会变动的文件。
构建时，assets 目录里的文件会被处理（压缩、合并等），然后输出到 dist 目录。
如果文件不需要 Vue 处理（比如 json 数据文件），可以放 public/ 目录。
public/：原样复制
放不需要任何处理的文件。
比如 public/favicon.ico，构建时会原封不动复制到输出目录。
package.json：项目配置
记录了项目信息和依赖：
{
"name": "vue3-getting-started",
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"build": "vue-tsc && vite build",
"preview": "vite preview"
},
"dependencies": {
"vue": "^3.4.0"
},
"devDependencies": {
"@vitejs/plugin-vue": "^5.0.0",
"typescript": "^5.3.0",
"vite": "^5.0.0",
"vue-tsc": "^1.8.0"
}
}
常用命令：
pnpm dev：启动开发服务器pnpm build：构建生产版本pnpm preview：预览构建结果
vite.config.ts：Vite 配置
Vite 是 Vue 3 的构建工具，这里可以配置插件、代理、构建选项等。
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
export default defineConfig({
plugins: [vue()],
server: {
port: 5173,
proxy: {
'/api': 'http://localhost:3000'
}
}
})
新手阶段一般不用改，但知道有这个东西就行。
tsconfig.json：TypeScript 配置
这是 TypeScript 的配置文件，规定了 TS 的编译规则。
{
"compilerOptions": {
"target": "ES2020",
"useDefineForClassFields": true,
"module": "ESNext",
"lib": ["ES2020", "DOM", "DOM.Iterable"],
"skipLibCheck": true,
"moduleResolution": "bundler",
"allowImportingTsExtensions": true,
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "preserve",
"strict": true
},
"include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"],
"references": [{ "path": "./tsconfig.node.json" }]
}
不用记住每个字段是什么意思，知道它是管 TypeScript 编译的就行。
推荐的阅读顺序
初次看项目，按这个顺序：
index.html—— 页面入口src/main.ts—— 应用起点src/App.vue—— 根组件，你的页面从这里开始src/components/—— 看具体组件
其他的先跳过，等用到再查。
总结
index.html是页面起点，Vue 内容渲染到#appmain.ts创建 Vue 应用并挂载App.vue是根组件，其他组件嵌套在里面components/放可复用组件assets/放样式、图片等资源public/放不需要处理的静态文件package.json是项目配置和依赖vite.config.ts是构建工具配置
记住这个结构，打开项目就不会懵了。
下篇我们让项目跑起来，顺便讲讲开发服务器和热更新。