面向 uni-app 的运行时框架与 UI 适配工作区
适合需要统一路由、鉴权、数据、表单、Schema、弹层和跨端主题体验的项目
Dux Uni 是一套给 uni-app 项目使用的运行时框架。
它的重点不是单纯提供组件,而是把移动端项目里反复出现的基础能力统一起来:
- 路由、页面守卫、登录跳转统一处理
- 请求、查询、缓存失效和 CRUD 统一处理
- 表单、选择器、上传下载、Schema 渲染统一处理
- UI 层可以独立替换,不把运行时能力绑死在某个组件库上
在这个工作区里,@duxweb/uni 负责 Headless 运行时能力,@duxweb/uni-pro 负责 Wot UI 适配和主题整合,starter 与 template 则分别承担演示和模板职责。
很多 uni-app 项目都会重复处理这些事情:
- 登录与会话恢复
- 权限校验与页面重定向
- 列表查询、详情查询、提交、删除
- 表单校验、远程选择器、上传下载
- 弹层页面、抽屉页面、Schema 动态渲染
Dux Uni 把这些都放在统一的运行时层,而不是散落在页面里。
@duxweb/uni 自身不要求你必须使用某个 UI 库。
你可以:
- 只使用
@duxweb/uni - 结合
@duxweb/uni-pro - 后续接入自己的 UI 适配层
这样做的好处是:能力层稳定,界面层可以替换。
工作区默认以 src/modules/* 组织模块,页面包装层由路由生成器自动产出。
这意味着:
- 页面代码更聚焦业务模块
src/pages/*不需要手写- 运行时代码、生成代码、业务代码边界更清晰
- 🎯 Headless 运行时优先
- 🔐 内建登录、会话、权限、页面守卫
- 📦 内建列表、CRUD、缓存失效、表单与上传下载能力
- 🧱 支持 JSON Schema 动态渲染
- 🪟 支持 confirm、modal、drawer 等统一弹层协议
- 🎨 支持通过
@duxweb/uni-pro对接 Wot UI 与主题 Token - 🧩 适合按模块组织 uni-app 项目
- 📘 完整 TypeScript 支持
定位:
- uni-app 的运行时基础能力层
负责:
- 路由、页面元信息、页面守卫
- 认证、权限、会话
- 数据 Provider、查询与 Mutation
- 表单、上传下载、Schema、事件与 Hook 扩展
定位:
@duxweb/uni的 Wot UI 适配层
负责:
- Wot UI 主题接入
- Dux Root、页面壳、弹层 Presenter
- AsyncForm、AsyncPicker、AsyncUpload 等高频适配组件
- UnoCSS Token 与界面层整合
定位:
- 官方脚手架入口
负责:
- 通过
npx创建新项目 - 注入官方模板
- 同步
@duxweb/uni/@duxweb/uni-pro的模板版本
定位:
- 官方模板骨架
适合:
- 作为真实业务项目起点
定位:
- 官方演示应用
适合:
- 联调能力
- 验收 UI 与运行时集成
- 查看完整页面示例
定位:
- VitePress 文档站源码
适合你:
- 已有自己的 UI 或设计体系
- 只想要运行时能力层
- 想自己控制页面、布局和组件封装
适合你:
- 想更快落地一套完整界面
- 需要 Wot UI 适配和统一主题
- 不想重复封装高频表单、选择器、弹层页面壳
| 对比项 | @duxweb/uni |
@duxweb/uni-pro |
|---|---|---|
| 定位 | Headless 运行时层 | Wot UI 适配层 |
| 是否包含路由 / 鉴权 / 数据能力 | ✅ | 依赖 @duxweb/uni |
| 是否包含页面壳 / Async 组件 | ❌ | ✅ |
| UI 方案 | 自由 | Wot UI |
| 适合谁 | 自己掌控界面层的团队 | 想快速落地界面的团队 |
npx @duxweb/uni-create my-app --ui pro
npx @duxweb/uni-create my-app --ui basepro:使用@duxweb/uni-pro和 Wot UI 适配base:只使用@duxweb/uni的运行时能力
pnpm install
pnpm starter:dev:h5
pnpm starter:dev:wx
pnpm starter:dev:apppnpm template:dev:h5
pnpm template:dev:wx
pnpm template:dev:apppnpm install
pnpm test
pnpm typecheck
pnpm starter:dev:h5
pnpm starter:build:h5
pnpm starter:build:wx
pnpm template:dev:h5
pnpm template:build:h5
pnpm docs:dev
pnpm docs:build建议从这些文档开始:
- 业务模块放在
src/modules/* src/pages/*是自动生成的路由包装层,不手写业务- 自动生成内容统一收敛到
src/runtime/*和src/pages/* - 页面与模块优先通过
useRouter()、useRoute()、useAuth()、useList()、useJsonSchema()等 Hook 访问运行时能力
发版说明见:
常用发布检查:
pnpm run release:check
pnpm run release:check:fullrelease:check:只检查真正参与发布的包release:check:full:额外包含 docs 构建
Dux Uni 适合用 uni-app 做更稳定的模块化应用,把路由、认证、数据、表单、Schema 和 UI 适配拆成清晰分层,而不是把这些能力散落在每个页面里。