uniapp + Vue3 加持的移动端开发框架,从H5 到鸿蒙,一套代码开发多端适配!-夜雨聆风

uniapp + Vue3 加持的移动端开发框架,从H5 到鸿蒙,一套代码开发多端适配!

基于 Uniapp+Vue3 打造的现代化移动端开发方案，实现一份代码适配小程序、H5、安卓、iOS 及鸿蒙 Next，集成 TypeScript、Vite 等前沿技术，适配主流开发编辑器，还自带低代码能力，封装丰富组件与拦截机制，大幅降低开发成本，提升企业级移动应用开发效率。这款基于最新技术栈打造的移动端开发框架，绝对能解决你的痛点。它以 Uniapp 为基础，深度融合 Vue3 生态，实现了一次开发，多端全适配。

这款框架直接摒弃了老旧的 Vue2 技术栈，全面升级为

Vue3.0+Vite+TypeScript 核心组合，从底层提升开发与构建效率。Vite 替代传统 Webpack 作为构建工具，热更新速度大幅提升，开发过程中修改代码无需漫长等待，调试体验直接跃升；TypeScript 的引入实现了强类型校验，搭配类型提示，从代码编写阶段就规避大量低级错误，团队协作的代码可维护性也大大提高。

一份代码多端适配，鸿蒙 Next 也能轻松搞定，多端适配是这款框架的核心亮点之一，基于 Uniapp 的跨端能力，实现了一份代码适配小程序、H5、安卓、iOS、鸿蒙 Next 五大终端，真正做到了一次开发，多端部署。对于企业来说，无需为不同终端组建单独的开发团队，大幅降低了开发与维护成本；对于开发者来说，不用再学习不同终端的开发语法，专注于业务逻辑即可，开发效率提升数倍。

新版特点

一份代码多终端适配，小程序、H5、安卓、ios、鸿蒙Next。
学习成本低、组件丰富、兼容性好、支持iframe嵌入。
新版APP具备低代码能力，包括表单设计、仪表盘设计等。
新版最大亮点是架构升级到 Vue3，适配鸿蒙 Next。
支持使用 VSCode 和 IntelliJ IDEA 开发，不再必须 HBuilderX，这显著提升了开发体验和效率。
支持低代码能力，例如Online表单可以在APP端展示和进行数据的添加与修改，仪表盘和大屏也支持移动端展示。

前端技术栈

前端 IDE 建议：Vscode、HBuilderX、Intellij IDEA
最新技术栈：Uniapp + Vue3.0 + Vite + TypeScript + Wot-design-uni + pinia + unocss
依赖管理：node、pnpm

环境要求

本地环境安装 node（18+）、pnpm （7.3+）

快速启动

配置接口地址

配置文件：env/.env.development

请把 http://localhost:8080/jeecg-boot 替换成自己地址，其他不用改

//  变量必须以 VITE_ 为前缀才能暴露给外部读取NODE_ENV = 'development';//  是否去除console 和 debuggerVITE_DELETE_CONSOLE = false;//  是否开启sourcemapVITE_SHOW_SOURCEMAP = true;// 后台接口全路径地址(必填)VITE_SERVER_BASEURL = 'http://localhost:8080/jeecg-boot';

启动项目

执行命令安装依赖

 pnpm i

运行启动命令，运行 H5

 pnpm run dev

功能模块

├─框架实现│  ├─APP开发框架搭建│  ├─登录对接│  ├─TOKEN接口机制│  ├─热更新\覆盖更新├─基础功能│  ├─菜单栏目│  ├─登录页面│  ├─移动首页│  ├─个人信息设置├─消息中心│  ├─通讯录│  ├─系统公告│  ├─消息推送│  ├─在线聊天├─低代码功能│  ├─Online表单（列表+表单渲染）│  ├─仪表盘（移动展示）├─示例代码│  ├─调用摄像头扫码(扫码)│  ├─获取地理位置(定位)├─新增组件│  ├─页面滚动│  ├─日历│  ├─时间选择│  ├─下拉选择│  ├─图片上传├─。。。

新旧版本对比

特性	旧版	新版
技术栈	Vue2，技术陈旧	Vue3，现代化开发体验
UI 框架	未集成	集成`wot-design-uni`
编辑器	仅限 HbuilderX	支持 VSCode、Intellij IDEA 等主流编辑器
鸿蒙	不支持	支持鸿蒙系统
构建工具	Webpack	Vite，构建更快
Unocss 原子化	不支持	支持 Unocss 原子化
TypeScript 支持	不支持	支持 TS，提供类型提示
基础组件封装	较少	封装丰富组件（用户、部门、分类字典树、自定义树、popup、popupDict、导航组件等）
代码片段快捷创建	无	支持 v3 快速创建页面片段

效果预览

基础功能

代码地址

仓库地址：https://gitee.com/jeecg/jeecguniapp后台源码：https://github.com/jeecgboot/jeecg-boot