JeecgBoot-Uniapp

这个项目的目录结构是标准的 Vite + Vue3 + TS 架构，它比传统的 uni-app 项目更接近 Vue3 官方的开发体验。

JeecgUniapp/

├── src/

│ ├── api/ # 所有的接口定义，按模块分类（如 sys.ts, user.ts）

│ ├── components/ # 全局自定义组件，Jeecg 封装的 UI 件

│ ├── hooks/ # Vue3 的组合式 API 钩子（封装逻辑复用）

│ ├── layouts/ # 页面布局模板（配合插件实现页面包装）

│ ├── pages/ # 【主包】核心页面（首页、登录、仪表盘）

│ ├── pages_detail/ # 【分包】详情类页面，减轻主包压力

│ ├── pages_sample/ # 【分包】示例页面，演示各种组件用法

│ ├── static/ # 静态资源（图标、图片）

│ ├── store/ # Pinia 状态管理（存储用户信息、Token）

│ ├── utils/ # 工具类（重点是其中的 http 目录）

│ ├── App.vue # 根组件

│ ├── main.ts # 项目入口

│ ├── pages.json.js # 动态路由生成的逻辑（如果有）

│ └── vite.config.ts # 核心插件配置（所有黑科技的源头）

封装 uni.request 到 http 目录

封装在 http 里的作用：

统一拦截 (Interceptors)：
- 请求拦截 ：在每个请求发出去前，自动在 Header 里塞入 X-Access-Token。你不用每个页面都去写拿 Token 的代码。
- 响应拦截：如果后端返回 401（Token过期），拦截器直接帮你弹窗并跳到登录页。如果返回 500，直接统一弹出错误提示。
环境切换 ：通过封装，你可以一键切换 开发环境、测试环境 和 生产环境 的 API 地址。
Promise 化 ：让原本的回调函数写法变成 async/await，代码写起来像德芙一样顺滑。

这就是你最懵逼的地方。它是 "约定式路由" 的实现者。

在每个 .vue 文件顶部的这段代码，叫做 SFC（单文件组件）路由配置。

HTML

复制代码

<route lang="json5" type="page">
{
  layout: 'default',
  style: {
    navigationBarTitleText: '用户中心',
    navigationStyle: 'custom'
  }
}
</route>

自动化 ：以前你增加一个页面，得去 pages.json 手动填地址、标题。现在你只要在 src/pages 下新建个文件，插件自动帮你把地址塞进 pages.json。
代码内聚：标题是啥、是否允许下拉刷新，这些配置直接写在页面代码里，不用跨文件找。

你只需要在 vite.config.ts 里引入它。插件会监听你的 src/pages 文件夹，只要你保存代码，它就在后台刷新 pages.json。

Jeecg 项目的分包实现非常聪明，也是靠这个插件完成的。

实现原理：

为什么要分包？ 因为小程序主包限制 2MB。Jeecg 这种功能非常多的项目，如果不分包，你连预览都点不开。通过这种方式，只有用户点击"详情"时，才会去加载 pages_detail 里的代码，极大提升了首屏启动速度。