文件夹结构
目录结构
我们已经为你生成了一个完整的开发框架，提供了涵盖中后台开发的各类功能和坑位，下面是整个项目的目录结构。
sh
┌── public # 静态资源
├── src # 源代码
│ ├── assets # 静态资源
│ ├── components # 组件库
│ ├── config # 配置
│ │ ├── routes # 页面路由配置
│ │ ├── settings # 项目默认设置
│ │ ├── themes # 预置主题
│ │ └── ... # 其他自定义配置
│ ├── layout # 框架布局视图
│ ├── router # 系统路由配置以及全局路由守卫
│ ├── services # 接口
│ ├── stores # Pinia状态管理
│ ├── utils # 全局公用方法
│ ├── views # 所有视图
│ ├── App.vue # 入口视图
│ ├── global.scss # 全局样式
│ └── main.js # 入口文件
├── .env # 默认环境变量
├── .env.test # 测试环境变量
├── .env.prod # 生产环境变量
├── .eslintrc.cjs # 代码风格的检查工具配置
├── .prettierrc.js # 代码格式化插件配置
├── env.d.ts # 全局类型声明文件
├── index.html # 项目的入口文件
├── package.json # 包管理
└── vite.config.js # vite 配置页面代码结构推荐
为了让项目代码组织更加规范，让开发能够更方便的定位到相关页面组件代码，我们定义了一套规范，该规范当前只作为推荐的指导，并非强制。
建议路由与视图文件名称保持一致，名称都使用小写字母加短横线分割
sh
src
├── components
└── views
├── dashboard // 路由组件下不应该再包含其他路由组件，基于这个约定就能清楚的区分路由组件和非路由组件了
| ├── components // 对于复杂的页面可以再自己做更深层次的组织，但建议不要超过三层
| ├── index.vue // 页面组件的代码
| └── index.scss // 对于有大量样式的页面可以把样式独立成一个文件
├── order // 路由组件下不应该再包含其他路由组件，基于这个约定就能清楚的区分路由组件和非路由组件了
| └── index.vue
├── User
| ├── components // group 下公用的组件集合
| ├── login // group 下的页面 login 页面
| └── register // group 下的页面 register 页面
└── * // 其它页面组件代码