Vue.js 目录结构

Vue.js 目录结构学习笔记一、典型 Vue 3 项目结构my-vue-app/ ├── public/ # 静态资源目录不经过 Vite 构建 │ └── favicon.ico # 网站图标 ├── src/ # 源代码目录核心开发区域 │ ├── assets/ # 静态资源经过构建处理 │ │ ├── images/ # 图片 │ │ ├── styles/ # 全局样式 │ │ └── fonts/ # 字体文件 │ ├── components/ # 可复用组件 │ │ ├── common/ # 通用基础组件按钮、弹窗等 │ │ └── business/ # 业务组件 │ ├── views/ # 页面级组件与路由对应 │ ├── router/ # 路由配置 │ │ └── index.ts │ ├── stores/ # Pinia 状态管理 │ │ └── user.ts │ ├── composables/ # 组合式函数可复用逻辑 │ ├── utils/ # 工具函数 │ │ └── request.ts # 例如Axios 封装 │ ├── api/ # 接口请求封装 │ ├── types/ # TypeScript 类型定义 │ ├── constants/ # 常量定义 │ ├── directives/ # 自定义指令 │ ├── plugins/ # 插件配置 │ ├── layouts/ # 布局组件 │ ├── App.vue # 根组件 │ └── main.ts # 应用入口 ├── index.html # HTML 入口模板 ├── package.json # 项目依赖与脚本 ├── tsconfig.json # TypeScript 配置 ├── vite.config.ts # Vite 构建配置 ├── env.d.ts # 环境类型声明 ├── .env # 通用环境变量 ├── .env.development # 开发环境变量 ├── .env.production # 生产环境变量 ├── .eslintrc.cjs # ESLint 配置 ├── .prettierrc.json # Prettier 配置 └── .gitignore # Git 忽略规则二、核心目录详解1.public/vssrc/assets/对比项public/src/assets/构建处理不经过构建经过 Vite 构建引用方式绝对路径/favicon.ico相对路径import文件名哈希无有缓存优化Tree-shaking不支持支持适用场景不变的文件、第三方库项目内使用的资源!-- public 中的资源 -- img src/logo.png / !-- assets 中的资源 -- script setup import logo from /assets/images/logo.png /script img :srclogo /2.components/vsviews/对比项components/views/定位可复用的 UI 组件页面级组件路由关联不直接关联路由与路由一一对应复用性高跨页面复用低通常只对应一个路由命名规范PascalCaseMyButton.vuePascalCaseUserList.vue3.composables/— 组合式函数Vue 3 的核心模式将可复用逻辑抽离为独立函数// src/composables/useLoading.tsimport{ref}fromvueexportfunctionuseLoading(){constloadingref(false)conststartLoading(){loading.valuetrue}conststopLoading(){loading.valuefalse}return{loading,startLoading,stopLoading}}!-- 使用 -- script setup import { useLoading } from /composables/useLoading const { loading, startLoading, stopLoading } useLoading() /script命名规范以use开头如useAuth、usePagination、useFetch。4.stores/— Pinia 状态管理// src/stores/user.tsimport{defineStore}frompiniaimport{ref}fromvueexportconstuseUserStoredefineStore(user,(){consttokenref()constuserInforef(null)functionsetToken(val:string){token.valueval}functionlogout(){token.valueuserInfo.valuenull}return{token,userInfo,setToken,logout}})5.api/— 接口请求封装// src/api/user.tsimportrequestfrom/utils/requestexportfunctionlogin(data:LoginForm){returnrequest.post(/auth/login,data)}exportfunctiongetUserInfo(){returnrequest.get(/user/info)}6.utils/— 工具函数// src/utils/format.tsexportfunctionformatDate(date:Date):string{returndate.toLocaleDateString(zh-CN)}exportfunctiondebounceTextends(...args:any[])any(fn:T,delay:number){lettimer:ReturnTypetypeofsetTimeoutreturn(...args:ParametersT){clearTimeout(timer)timersetTimeout(()fn(...args),delay)}}7.layouts/— 布局组件layouts/ ├── DefaultLayout.vue # 默认布局Header Sidebar Main ├── BlankLayout.vue # 空白布局登录页等 └── AdminLayout.vue # 后台管理布局配合路由使用// router/index.ts{path:/dashboard,component:()import(/layouts/DefaultLayout.vue),children:[{path:,component:()import(/views/Dashboard.vue)}]}三、路径别名配置Vite 默认配置指向src/// vite.config.tsimport{fileURLToPath,URL}fromnode:urlexportdefaultdefineConfig({resolve:{alias:{:fileURLToPath(newURL(./src,import.meta.url))}}})使用示例importMyButtonfrom/components/common/MyButton.vueimport{useUserStore}from/stores/userimportrequestfrom/utils/request四、环境变量文件文件加载时机用途.env所有环境通用变量.env.developmentnpm run dev开发环境变量.env.productionnpm run build生产环境变量.env.staging自定义模式预发布环境变量# .env.developmentVITE_API_BASE_URLhttp://localhost:8080/apiVITE_APP_TITLE开发环境# .env.productionVITE_API_BASE_URLhttps://api.example.comVITE_APP_TITLE生产环境环境变量必须以VITE_前缀开头才能在客户端代码中访问。constbaseUrlimport.meta.env.VITE_API_BASE_URL五、目录规范建议命名规范类型规范示例组件文件PascalCaseUserList.vue组合式函数camelCaseuse 前缀useAuth.ts工具函数camelCaseformatDate.tsStore 文件camelCaseuser.tsAPI 文件camelCaseuser.ts类型文件camelCaseuser.d.ts样式文件kebab-caseglobal-style.css模块化组织大型项目推荐当项目规模增大时按业务模块组织src/ ├── modules/ │ ├── user/ │ │ ├── components/ │ │ ├── composables/ │ │ ├── api.ts │ │ ├── store.ts │ │ ├── types.ts │ │ └── routes.ts │ ├── order/ │ │ ├── components/ │ │ ├── composables/ │ │ ├── api.ts │ │ ├── store.ts │ │ ├── types.ts │ │ └── routes.ts │ └── ... ├── shared/ # 跨模块共享 │ ├── components/ │ ├── composables/ │ ├── utils/ │ └── constants/ ├── App.vue └── main.ts六、总结目录一句话说明public/不构建的静态文件src/assets/参与构建的静态资源src/components/可复用 UI 组件src/views/页面级组件src/router/路由配置src/stores/全局状态管理src/composables/可复用逻辑组合式函数src/api/接口请求封装src/utils/通用工具函数src/types/TS 类型定义src/layouts/页面布局组件合理的目录结构是项目可维护性的基础建议在项目初期就确立规范团队统一遵循。