前言在前两篇文章中我们已经✅ 明确了Vue3 是必须掌握的技能✅ 完成了Vite Vue3 TypeScript 的环境搭建但很多初学者在创建完项目后面对一堆目录和文件依然会感到困惑❓main.ts到底做了什么❓ 为什么 HTML 放在根目录❓ 组件应该怎么组织才合理这一篇我们就逐层拆解 Vue3 项目结构并在此基础上建立正确的组件化思维。一、Vue3 Vite 项目整体结构使用pnpm create vite创建的项目默认结构如下my-vue3-app ├── .vscode/ # VS Code 配置可选 ├── node_modules/ ├── public/ # 静态资源不经过 Vite 处理 ├── src/ # 源码核心目录 │ ├── assets/ # 图片、字体等资源 │ ├── components/ # 公共组件 │ ├── views/ # 页面级组件可选 │ ├── router/ # 路由配置后续章节 │ ├── store/ # 状态管理Pinia │ ├── utils/ # 工具函数 │ ├── App.vue # 根组件 │ └── main.ts # 应用入口 ├── index.html # 入口 HTML ├── package.json ├── tsconfig.json └── vite.config.ts # Vite 配置二、index.html真正的入口1️⃣ Vue3 与 Vue2 的最大不同Vue2Vue CLIVue3ViteHTML 被 Webpack 隐藏✅ HTML 显式存在自动注入 JS✅ 手动引入入口脚本!DOCTYPE html html langzh-CN head meta charsetUTF-8 / link relicon href/favicon.ico / titleVue3 App/title /head body div idapp/div script typemodule src/src/main.ts/script /body /html关键点#app只是挂载点main.ts通过原生 ES Module 加载更符合现代浏览器标准三、main.ts应用的起点import { createApp } from vue import App from ./App.vue createApp(App).mount(#app)1️⃣ 逐行解析代码含义createApp(App)创建 Vue 应用实例mount(#app)挂载到 DOM2️⃣ 与 Vue2 的本质区别// Vue2 new Vue({ render: h h(App) }).$mount(#app)✅ Vue3 的优势没有全局 Vue 构造函数每个应用都是独立实例插件注册不会影响全局四、App.vue根组件的演变1️⃣ 默认结构template HelloWorld msgVue3 Vite / /template script setup langts import HelloWorld from ./components/HelloWorld.vue /script2️⃣ Vue3 的关键变化变化点说明script setup更简洁的组合式写法不需要 export default默认导出由编译器完成组件自动注册import 即使用五、src 目录结构详解重点1️⃣ assets资源文件assets/ ├── images/ ├── fonts/ └── styles/✅ 特点会被 Vite 处理压缩、hash适合放图片、字体、全局样式2️⃣ components公共组件components/ ├── Button/ │ ├── BaseButton.vue │ └── index.ts ├── Input/ └── common/✅ 建议一个组件一个目录配套 index.ts 统一导出提高可维护性3️⃣ views / pages推荐约定views/ ├── Home/ │ ├── index.vue │ └── components/ ├── About/ └── User/ 区分原则views页面级组件对应路由components可复用的 UI 组件4️⃣ router / store / utils目录作用routerVue Router 配置storePinia 状态管理utils请求封装、工具函数六、组件化思维Vue3 开发的灵魂1️⃣ 什么是组件化一句话概括把 UI 拆成独立、可复用、职责单一的单位。2️⃣ 组件划分原则✅单一职责原则一个组件只做一件事✅可复用性通用 UI 抽成公共组件✅层级清晰页面组件 ≠ UI 组件3️⃣ 示例一个典型组件结构template div classuser-card img :srcavatar / h3{{ name }}/h3 /div /template script setup langts defineProps{ avatar: string name: string }() /script style scoped .user-card { padding: 16px; } /style七、项目结构常见误区误区正确做法所有组件都放 componentsviews 单独管理页面一个文件写多个组件一个文件一个组件业务逻辑写在 App.vue拆分到 views / store样式全局污染使用scoped或 CSS Modules 下期预告第 04 篇Vue3 响应式原理初探 —— 从 Object.defineProperty 到 Proxy