uniappX前端开发模版框架

近期为了高效完成公司项目 KPI、减少团队重复造轮子成本参考成熟开源项目 unibest 架构思想基于最新 UniApp X 框架重构适配打造了一套开箱即用的unibestX项目模板。新项目不用从零配置路由、请求、全局拦截、UI 基础配置拉取项目即可直接开发业务极大缩短项目初始化周期。unibestX - 最好的 uni-app X 开发框架unibestX—— 最好的uni-app X开发模板由uni-app XVue3UTSVite5UnoCSSuview-ultraz-paging-x构成使用了下一代 uni-app 原生开发技术栈通过HBuilderX运行Android、iOS、鸿蒙、H5和小程序等多端平台。如果项目对您有帮助请帮忙点个Star ⭐或赞 支持一下您的鼓励是作者持续优化与维护的动力unibestX内置了自定义 TabBar、Layout 布局、请求封装、请求拦截、登录拦截、路由守卫、UnoCSS、i18n 多语言、Pinia 状态管理、主题切换等基础功能提供了代码提示、自动格式化、统一配置等辅助功能让你编写uni-app X拥有best体验。✨ 特性uni-app X— 基于 UTS 语言的原生渲染性能远超 WebView 方案Vue3 Vite5— 最新前端技术栈开发体验极佳UnoCSS— 原子化 CSS 引擎高效编写样式uview-ultra— 专为 uni-app X 打造的 UI 组件库本项目深度修复了大量的 bug 与兼容性问题如针对 uni-app X 原生平台暂不支持gap、display: grid等 CSS 属性的限制重构并修复了up-box、up-sticky、up-tooltip等核心组件保障原生端的流畅体验z-paging-x— 强大的分页列表组件Pinia 持久化— 状态管理 本地持久化开箱即用i18n 多语言— 内置中英文切换支持自动检测系统语言️路由守卫— 黑名单/白名单策略灵活的登录拦截动态主题— CSS 变量驱动的主题切换ECharts— 图表组件支持自定义 TabBar— 支持凸起按钮和角标请求封装— 基于lime-request支持多域名、Token 自动续期平台兼容性AndroidiOS鸿蒙H5微信小程序√√√√√注意uni-app X 目前兼容以上 5 个端平台。 各端首页截图微信小程序 | Android | H5 | iOS | 鸿蒙⚙️ 环境Node 22pnpm 7.30HBuilderX 4.0推荐最新版Vue Official 2.1.10TypeScript 5.0JDK 17Android 平台Android SDKAndroid 平台XcodeiOS 平台仅 macOSDevEco Studio鸿蒙平台 项目结构unibestX/├── plugins/ # Vite 插件布局、根组件注入│ ├── uni-layouts-plugin.ts│ └── root-plugin.ts├── src/│ ├── api/ # API 请求函数│ ├── components/ # 公共组件│ │ ├── NavBar/ # 导航栏组件│ │ ├── MySteps/ # 步骤条组件│ │ ├── MySubsection/ # 分段器组件│ │ └── MyTabs/ # 标签页组件│ ├── http/ # HTTP 请求封装│ │ ├── request.uts # HttpClient 类│ │ ├── types.uts # 响应类型定义│ │ └── tools/enum.uts # 状态码枚举│ ├── i18n/ # 国际化│ │ ├── index.uts # i18n 实例│ │ └── locales/ # 语言包zh-CN / en-US│ ├── layouts/ # 页面布局│ │ └── default.uvue # 默认布局│ ├── pages/ # 主页面TabBar 页│ │ ├── index/ # 首页│ │ ├── basic/ # 基础组件展示│ │ ├── function/ # 原生能力展示│ │ ├── ai/ # AI 助手Mock│ │ └── me/ # 个人中心│ ├── router/ # 路由配置│ │ ├── config.uts # 登录策略配置│ │ └── interceptor.uts# 全局路由拦截│ ├── store/ # Pinia 状态管理│ │ ├── index.uts # Pinia 实例 持久化插件│ │ ├── app.uts # 应用状态主题/语言│ │ ├── token.uts # Token 状态单/双 Token│ │ └── user.uts # 用户信息│ ├── style/ # 全局样式│ ├── sub/ # 分包页面│ │ ├── auth/ # 登录/注册│ │ ├── test/ # URL 参数测试│ │ ├── paging/ # 分页列表演示│ │ └── uview-ultra/ # UI 组件展示│ ├── tabbar/ # 自定义 TabBar│ │ ├── index.uvue # TabBar 容器│ │ ├── TabbarItem.uvue# TabBar 项│ │ ├── config.uts # TabBar 配置│ │ ├── store.uts # TabBar 状态│ │ └── types.uts # 类型定义│ └── utils/ # 工具函数│ ├── backPress.uts # 双击退出│ ├── i18n.uts # i18n 辅助│ ├── systemInfo.uts # 屏幕信息│ ├── toLoginPage.uts# 登录跳转│ └── toast.uts # 全局 Toast├── uni_modules/ # uni-app 插件市场模块├── js_sdk/ # JS SDKUnoCSS 等├── App.ku.uvue # 全局根组件主题/TabBar/Toast├── main.uts # 应用入口├── pages.json # 页面路由配置├── manifest.json # 应用配置清单├── vite.config.ts # Vite 构建配置├── uni.scss # 全局 SCSS 变量└── tsconfig.json # TypeScript 配置 快速开始1. 克隆项目gitclone https://github.com/cq112233/unibestX.gitcdunibestX2. 安装依赖在运行项目之前请先在控制台执行以下命令安装项目所需的 Node 依赖pnpminstall3. 打开项目使用HBuilderX打开项目根目录。 运行支持热更新通过HBuilderX启动运行Android 平台在 HBuilderX 中选择运行 → 运行到手机或模拟器选择目标设备即可。iOS 平台在 HBuilderX 中选择运行 → 运行到手机或模拟器选择 iOS 设备需 macOS Xcode 环境。鸿蒙平台在 HBuilderX 中选择运行 → 运行到手机或模拟器选择鸿蒙设备需 DevEco Studio 环境。H5 平台在 HBuilderX 中选择运行 → 运行到浏览器。微信小程序在 HBuilderX 中选择运行 → 运行到小程序模拟器 → 微信开发者工具。 发布Android 平台在 HBuilderX 中选择发行 → 原生App-云打包或原生App-本地打包。iOS 平台在 HBuilderX 中选择发行 → 原生App-云打包需 Apple 开发者证书。鸿蒙平台在 HBuilderX 中选择发行 → 原生App-鸿蒙。H5 平台在 HBuilderX 中选择发行 → 网站-H5手机版打包后的文件在dist/build/h5。微信小程序在 HBuilderX 中选择发行 → 小程序-微信然后通过微信开发者工具上传。 核心功能说明自定义 TabBar内置自定义 TabBar 组件支持5 个 Tab 项配置中间凸起按钮如 AI 入口角标显示动态主题色路由守卫提供灵活的登录拦截策略黑名单模式默认仅指定页面需要登录白名单模式除指定页面外全部需要登录支持登录后自动跳回原页面请求封装基于lime-request封装的 HTTP 客户端自动携带 Token请求/响应拦截器多域名支持401 自动登出支持忽略认证的请求状态管理基于x-pinia-sPinia for uni-app XAppStore— 主题色、语言设置TokenStore— 支持单 Token 和双 Tokenaccess refresh模式UserStore— 用户信息管理内置持久化插件自动同步到本地存储i18n 多语言基于lime-i18n的国际化方案内置中文zh-CN和英文en-US自动检测系统语言VSCode i18n-ally 插件支持非 Vue 文件中也可使用翻译函数Layout 布局通过自定义 Vite 插件实现自动为页面包裹 Layout 组件支持页面级别route配置自定义布局可通过layout: false禁用布局 技术栈详情类别技术说明框架uni-app X下一代 uni-app原生渲染语言UTSuni-app Type Script编译为原生 Kotlin/Swift前端框架Vue 3Composition API构建工具Vite 5极速开发体验CSS 引擎UnoCSS原子化 CSS自定义规则UI 组件库uview-ultrauni-app X 专用 UI 库已深度重构修复原生gap/grid限制下的多端兼容问题如up-sticky、up-box等分页组件z-paging-x强大的下拉刷新 分页加载状态管理x-pinia-s (Pinia)uni-app X 版 PiniaHTTP 请求lime-requestuni-app X 兼容请求库国际化lime-i18nvue-i18n 兼容方案图表e-chartECharts for uni-app X图标uni-icons lime-icon双图标方案⚠️ UTS 开发注意事项文件扩展名使用.uts逻辑代码和.uvue页面/组件而非.ts和.vue类型系统UTS 不支持undefined联合类型仅限null使用而非CSS 限制部分 CSS 属性在原生平台不支持具体参考 uni-app X 文档API 限制原生平台不支持浏览器 API如window、document、localStorage等SCSS 变量支持 SCSS 变量但动态覆盖需使用 CSS 变量方式[!IMPORTANT]安卓端语法最严Android 编译器的 UTS 类型与语法校验是所有平台中最严格的。一般如果 Android 端编译正常通过其他平台H5、微信小程序、iOS等通常都不会有大问题。 参考本项目参考自 unibest官网地址https://unibest.tech/ LicenseMITCopyright © 2026 HTwoO