典型的 Vue 3 项目目录结构详解

典型的 Vue 3 项目目录结构遵循模块化设计原则，旨在提升代码的可维护性和协作效率。以下基于主流脚手架（如 create-vue 或 Vite）生成的模板进行详解，结合核心文件和目录的功能说明：

---

​​根目录结构​​

​​目录/文件​​	​​作用说明​​	​​引用来源​​
node_modules/	存储项目依赖的 npm 包，由包管理器自动生成，​​禁止手动修改​​。
public/	存放无需构建的静态资源（如 index.html、favicon.ico），文件会直接复制到最终输出目录。
src/	​​核心源代码目录​​，包含应用的所有业务逻辑和组件。
.gitignore	指定 Git 忽略的文件（如 node_modules/、构建产物）。
package.json	定义项目元数据、依赖项和脚本命令（如 npm run dev 启动开发服务器）。
vite.config.js	Vite 构建工具的配置文件，支持路径别名、代理服务器等定制。
tsconfig.json	TypeScript 项目的编译配置（如类型检查、模块解析规则）。

---

️ ​​src/ 目录详解​​

​​子目录/文件​​	​​功能说明​​	​​典型内容​​
assets/	存放需构建处理的静态资源（图片、字体、SCSS 文件），通过相对路径引用。	logo.png, global.scss
components/	​​可复用组件​​目录，按功能或模块分类（如 Common/Button.vue、Layout/Navbar.vue）。	通用 UI 组件、业务组件
views/ 或 pages/	​​页面级组件​​目录，每个路由对应一个视图（如 Home.vue、User/Profile.vue）。	路由映射的页面组件
router/	路由配置文件（index.js），定义路径与组件的映射关系。	createRouter() 配置
store/	状态管理配置（Vuex 或 Pinia），集中管理全局状态（如用户登录信息）。	defineStore()（Pinia）或 createStore()（Vuex）
hooks/	存放 Composition API 的自定义 Hook（如 useFetch.js），封装可复用逻辑。	数据请求、表单验证等逻辑
utils/	工具函数库（如 request.js 封装 Axios 请求）。	日期格式化、权限校验等辅助函数
App.vue	​​根组件​​，定义全局布局（如顶部导航栏），包含  渲染页面内容。	模板、样式及全局逻辑
main.js/main.ts	​​应用入口文件​​，初始化 Vue 实例、挂载插件和全局配置。	createApp(App).use(router).use(store).mount('#app')

---

​​核心文件详解​​

1. ​​public/index.html​​

   • ​​作用​​：应用的主 HTML 模板，包含 
      作为 Vue 挂载点。
   • ​​关键代码​​：

2. ​​src/main.js​​

   • ​​作用​​：
     • 创建 Vue 实例：const app = createApp(App)。
     • 注册全局插件（路由、状态管理、UI 库）。
     • 挂载到 DOM：app.mount('#app')。
   • ​​示例​​：

     import { createApp } from 'vue'; import App from './App.vue'; import router from './router'; import ElementPlus from 'element-plus'; const app = createApp(App); app.use(router).use(ElementPlus).mount('#app');

3. ​​src/App.vue​​

   • ​​结构​​：