Vite创建vue3项目目录结构

your-vue-project/ ├── node_modules/ # 项目依赖包（npm install 生成，无需手动修改） ├── public/ # 静态资源（不会被Vite构建处理，直接复制到dist） │ ├── favicon.ico # 网站图标 │ └── robots.txt # 搜索引擎爬取规则 ├── src/ # 项目核心源码（99%的开发工作在此目录） │ ├── api/ # 接口请求相关（统一管理接口地址、请求方法） │ │ ├── index.js # 接口请求封装（如axios拦截器、基础配置） │ │ ├── user.js # 用户模块接口（登录、注册、获取用户信息等） │ │ └── goods.js # 商品模块接口（列表、详情、新增等） │ ├── assets/ # 静态资源（会被Vite构建处理，如图片、样式、字体） │ │ ├── images/ # 图片资源（png/jpg/svg等，建议按模块分类） │ │ ├── styles/ # 全局样式（通用样式、变量、重置样式） │ │ │ ├── reset.scss # 重置浏览器默认样式（如margin/padding清零） │ │ │ ├── variables.scss # 全局样式变量（色值、字号、间距等） │ │ │ └── global.scss # 全局通用样式（如body、容器、按钮基础样式） │ │ └── fonts/ # 自定义字体文件（如iconfont、特殊字体） │ ├── components/ # 通用组件（全局复用，非页面级组件） │ │ ├── common/ # 基础通用组件（如Button、Input、Loading、Empty） │ │ ├── layout/ # 布局组件（如Header、Sidebar、Footer、MainLayout） │ │ └── business/ # 业务通用组件（如GoodsCard、UserForm、OrderTable） │ ├── composables/ # 组合式函数（Vue 3特有，抽离复用的响应式逻辑） │ │ ├── useUser.js # 用户相关逻辑（如登录状态、权限判断） │ │ └── useScroll.js # 滚动相关逻辑（如虚拟列表、滚动加载） │ ├── directives/ # 自定义指令（如权限指令v-permission、防抖指令v-debounce） │ │ ├── index.js # 注册所有自定义指令 │ │ └── permission.js # 权限指令具体实现 │ ├── hooks/ # 钩子函数（非响应式的工具逻辑，或兼容Vue 2的hooks） │ │ └── useFormat.js # 格式化工具（如时间、金额、手机号格式化） │ ├── layouts/ # 页面布局组件（如后台管理系统的侧边栏+主内容布局） │ │ ├── BasicLayout.vue # 基础布局（包含Header、Sidebar、Main） │ │ └── BlankLayout.vue # 空白布局（无Header/Sidebar，如登录页） │ ├── router/ # 路由配置（页面跳转、路由守卫、权限控制） │ │ └── index.js # 路由核心配置（定义路由规则、注册路由守卫） │ ├── store/ # 状态管理（Pinia/Vuex，全局共享数据） │ │ ├── index.js # 注册Pinia/Vuex │ │ ├── modules/ # 模块化状态（按业务拆分） │ │ │ ├── user.js # 用户状态（如token、用户信息、登录状态） │ │ │ └── cart.js # 购物车状态（如商品列表、数量、总价） │ ├── utils/ # 工具函数（通用工具，无业务耦合） │ │ ├── request.js # axios二次封装（可选，也可放api目录） │ │ ├── format.js # 格式化工具（时间、金额、字符串等） │ │ ├── storage.js # 本地存储封装（localStorage/sessionStorage） │ │ └── validate.js # 校验工具（手机号、邮箱、表单规则等） │ ├── views/ # 页面级组件（对应路由的页面，按业务模块分类） │ │ ├── login/ # 登录模块 │ │ │ └── index.vue # 登录页 │ │ ├── dashboard/ # 仪表盘模块 │ │ │ └── index.vue # 首页仪表盘 │ │ ├── user/ # 用户管理模块 │ │ │ ├── list.vue # 用户列表页 │ │ │ └── detail.vue # 用户详情页 │ │ └── goods/ # 商品管理模块 │ │ ├── list.vue # 商品列表页 │ │ ├── add.vue # 新增商品页 │ │ └── edit.vue # 编辑商品页 │ ├── App.vue # 根组件（项目入口组件，包裹所有页面） │ ├── main.js # 项目入口文件（创建Vue实例、挂载App、注册全局资源） │ └── permission.js # 权限控制入口（如路由守卫、登录校验） ├── .env # 全局环境变量（所有环境生效） ├── .env.development # 开发环境变量（npm run dev 生效） ├── .env.production # 生产环境变量（npm run build 生效） ├── .eslintrc.js # ESLint配置（代码规范检查，如语法错误、格式问题） ├── .prettierrc.js # Prettier配置（代码格式化规则，如缩进、换行） ├── .gitignore # Git忽略文件（如node_modules、dist、.env.local） ├── index.html # 单页应用入口HTML（Vite的入口，挂载App组件） ├── package.json # 项目配置（依赖、脚本命令、项目名称/版本） ├── package-lock.json # 依赖版本锁定（确保多人开发依赖版本一致） ├── vite.config.js # Vite配置（构建、开发服务器、别名、插件等） └── README.md # 项目说明文档（安装、启动、部署、目录说明等）