vue3 + vite
├── src/ # 源代码
│ ├── assets/ # 静态资源（图片、字体、样式等）
│ ├── components/ # 公共组件
│ ├── views/ # 页面组件（路由对应的页面）
│ ├── router/ # 路由配置
│ ├── store/ # 状态管理（Pinia / Vuex）
│ ├── api/ # 请求模块（封装 axios 等）
│ ├── utils/ # 工具函数
│ ├── styles/ # 全局样式（变量、重置样式）
│ ├── layout/ # 布局（header/sidebar/footer）
│ ├── App.vue # 根组件
│ ├── main.js # 项目入口
│ └── env.d.ts # ts 支持（如果是 TS）
│
├── public/ # 静态文件（不会被打包处理）
├── index.html # 入口 HTML
├── package.json # 项目依赖、脚本
├── vite.config.js # Vite 配置
└── .gitignore # Git 忽略文件
assets: 静态资源
- 图片
- 图标
- 全局css
- 字体文件
components: 公共组件
页面之间都会用到的组件，例如navbar.vue
views: 路由页面组件
每个url对应一个页面组件
router: 路由文件
store: 全局状态管理
api: 接口请求封装
utils: 工具函数
styles: 全局样式
layout: 布局
layout在后台管理系统，或带侧边栏、导航栏的项目中几乎都会用到。
---------------------------------------
| Header 顶部导航栏（用户信息） |
---------------------------------------
| Sidebar 侧边菜单 | 主内容区域 |
| | (router-view) |
---------------------------------------
例如后台界面通常长这样，这些固定不变的框架就叫做布局（layout），页面真正变化的部分（Home，User，Order）放在右侧的内容区域，避免每个页面重复写头部/侧边栏
