Vue 3 移动端实现概览
Vue 3 移动端位于 Vue 3 项目的 ruoyi-fastapi-app，使用 uni-app Vue 3、Vite、Pinia 和组合式 API。它与 Vue 2 移动端调用同一套后端协议，但应用入口、状态访问、自动导入和构建插件不能跨版本照搬。
实现地图
| 要解决的问题 | 主要入口 | 继续阅读 |
|---|---|---|
| 怎样启动 H5、小程序和 App | package.json.scripts、manifest.json | 本地运行与平台命令 |
| 应用怎样创建并安装公共能力 | src/main.ts、src/App.vue、src/plugins | 应用装配与 Pinia |
| 用户和应用配置怎样保存 | src/store/modules/user.js、config.js | 应用装配与 Pinia |
| 组合式页面怎样接入生命周期 | 页面 <script setup>、@dcloudio/uni-app | 开发一个移动端页面 |
| Vite 怎样编译到不同平台 | vite.config.ts、platform.ts | Vite、Tailwind 与多端构建 |
| Tailwind 类怎样变成小程序可用样式 | tailwind.config.ts、postcss.config.ts | Vite、Tailwind 与多端构建 |
| 登录、Token 和加密怎样工作 | utils/request.js、utils/auth.js | 请求、认证与传输加密 |
| 页面怎样注册和跳转 | pages.json、permission.js | 页面与登录拦截 |
运行时链路
- uni-app 调用
src/main.ts导出的createApp()，以createSSRApp(App)创建当前应用实例。 - 应用先安装唯一 Pinia 实例，再将
useDict、$tab、$auth和$modal挂到全局属性。 src/permission.js在入口加载时注册四种 uni 页面跳转拦截器。App.vue的onLaunch把src/config.js写入 Config Store；H5 没有 Token 时重启页面栈到登录页。- 页面从 Pinia 读取用户状态，通过公共 API 模块和请求层访问共用 FastAPI 后端。
- Vite 按
UNI_PLATFORM选择 H5、App 或小程序编译目标，再由 Tailwind 与平台插件转换样式。
这里的 createSSRApp 是 uni-app Vue 3 规定的应用工厂形式，并不意味着当前 H5 默认启用了 SSR。只有执行 dev:h5:ssr 或 build:h5:ssr 才进入对应的 H5 SSR 命令链。
公共机制与版本实现
| 公共机制 | Vue 3 页面需要知道的实现入口 |
|---|---|
| 页面静态注册 | 页面文件创建后仍必须修改 src/pages.json |
| 登录保护 | 继续使用 $tab 或 uni 跳转 API，由 permission.js 统一拦截 |
| Token 与用户快照 | Token 在 App-Token，用户字段由 User Store 同步到 storage_data |
| 普通请求 | 页面只调用 src/api；策略、公钥、请求加密和错误处理留在 request.js |
| 上传 | 使用独立 upload.js，不假设它进入普通请求加密链 |
| 功能权限 | 页面用 $auth 决定入口呈现，后端仍负责真实接口授权 |
| 字典 | useDict(...) 返回响应式字典数据，并复用 Dict Store 的当前内存缓存 |
修改时先判断归属
- 改后端 URL、应用展示信息：修改
src/config.js。 - 改 AppID、版本、平台权限和 H5 路由：修改
src/manifest.json。 - 改页面标题、TabBar 或页面注册：修改
src/pages.json。 - 改跨页面用户状态：修改 Pinia Store，并同步退出清理策略。
- 改小程序类名转换、单位或 Preflight：修改 Vite、Tailwind、PostCSS 或
platform.ts。 - 改登录协议、401 或传输加密：先阅读公共请求、认证与传输加密，不要在页面局部绕开请求层。