unibest —— 最好的 uniapp 开发模板，由 uniapp + Vue3 + Ts + Vite5 + UnoCss + wot-ui + z-paging 构成，使用了最新的前端技术栈，无需依靠 HBuilderX，通过命令行方式运行 web、小程序 和 App（编辑器推荐 VSCode，可选 webstorm）。

unibest 内置了 约定式路由、layout布局、请求封装、请求拦截、登录拦截、UnoCSS、i18n多语言 等基础功能，提供了 代码提示、自动格式化、统一配置、代码片段 等辅助功能，让你编写 uniapp 拥有 best 体验 （ unibest 的由来）。

⚡️ 平台兼容性

H5IOS安卓微信小程序字节小程序快手小程序支付宝小程序钉钉小程序百度小程序
√√√√√√√√√

注意每种 UI框架 支持的平台有所不同，详情请看各 UI框架 的官网，也可以看 unibest 文档。

✨ 特性

  • ⚡️ Vue 3, Vite, pnpm, esbuild - 就是快！
  • 🔥 最新语法 <script lang="ts" setup> 语法
  • 🎨 UnoCSS 高性能且极具灵活性的即时原子化 CSS 引擎
  • 😃 UnoCSS Icons & icones - 海量图标供你选择
  • 🍍 pinia & pinia-plugin-persistedstate - 全端适配的全局数据管理
  • 🗂 uni.request 请求封装 - 一键引入，快捷使用
  • 📦 路由拦截 基础封装，支持扩展，快捷使用，拒绝黑盒
  • 📥 API 自动加载 - 直接使用 Composition API 无需引入
  • 🎉 v3 Code Snippets 加快你的页面生成
  • 🦾 Pritter & ESLint & Stylelint & husky & lint-staged + commitlint - 保证代码质量
  • 🌈 TypeScript 加持，同时又兼容 js ，同时满足不同人群
  • 💡 ES6 import 自动排序，css 属性 自动排序，增强编码一致性
  • 🖥 多环境 配置分开，想则怎么配置就怎么配置

⚙️ 环境

  • node>=18
  • pnpm>=7.30
  • Vue Official>=2.1.10
  • TypeScript>=5.0

📥 新版分支

  • main == base
  • base --> base-i18n
  • base-login --> base-login-i18n

🔥 快速开始

执行 pnpm create unibest 创建项目
执行 pnpm i 安装依赖
执行 pnpm dev 运行 H5
执行 pnpm dev:mp 运行 微信小程序

📦 运行（支持热更新）

  • web平台： pnpm dev:h5, 然后打开 http://localhost:9000/。
  • weixin平台：pnpm dev:mp 然后打开微信开发者工具，导入本地文件夹，选择本项目的dist/dev/mp-weixin 文件。
  • APP平台：pnpm dev:app, 然后打开 HBuilderX，导入刚刚生成的dist/dev/app 文件夹，选择运行到模拟器(开发时优先使用)，或者运行的安卓/ios基座。(如果是 安卓 和 鸿蒙 平台，则不用这个方式，可以把整个unibest项目导入到hbx，通过hbx的菜单来运行到对应的平台。)

🔗 发布

  • web平台： pnpm build:h5，打包后的文件在 dist/build/h5，可以放到web服务器，如nginx运行。如果最终不是放在根目录，可以在 manifest.config.ts 文件的 h5.router.base 属性进行修改。
  • weixin平台：pnpm build:mp, 打包后的文件在 dist/build/mp-weixin，然后通过微信开发者工具导入，并点击右上角的“上传”按钮进行上传。
  • APP平台：pnpm build:app, 然后打开 HBuilderX，导入刚刚生成的dist/build/app 文件夹，选择发行 - APP云打包。(如果是 安卓 和 鸿蒙 平台，则不用这个方式，可以把整个unibest项目导入到hbx，通过hbx的菜单来发行到对应的平台。)

🌈 官网