1. Project Overview

unibest - The Best Cross-Platform Solution for uniapp

unibest is a cross-platform solution for uniapp, built with uniapp + Vue3 + Ts + Vite4 + UnoCss + VSCode (or WebStorm). It uses the latest frontend technology stack and does not require HBuilderX. Web applications, mini programs, and Apps can be run directly from the command line.

unibest comes with built-in essential features such as convention-based routing, layout management, request encapsulation, request interception, login interception, UnoCSS, and i18n multilingual support. It also provides helpful features such as code completion, automatic formatting, centralized configuration, and code snippets, giving you the best experience when developing with uniapp (hence the name unibest).

2. Open Source License

Licensed under MIT

3. Screenshots

4. Feature Overview

unibest - The easiest-to-use uniapp development template. Powered by uniapp + Vue3 + Ts + Vite4 + UnoCss + UniUI, unibest is a cross-platform quick-start template developed with VS Code. It provides code completion, automatic formatting, centralized configuration, code snippets, and many commonly used development components built in. Ready to use out of the box, it gives you the best experience when developing with uniapp.

✨ Features

• ⚡️ Vue 3, Vite, pnpm, esbuild - Simply fast!

• Latest Syntax - <script lang="ts" setup> syntax

• UnoCSS - A high-performance and highly flexible on-demand atomic CSS engine.

• UnoCSS Icons & icones - A vast collection of icons to choose from.

• pinia & pinia-plugin-persistedstate - Cross-platform global state management.

• uni.request Request Encapsulation - Import once and use with ease.

• Automatic Component Loading - Configurable component loading for effortless integration.

• Automatic API Loading - Use Composition API directly without importing it.

• v3 Code Snippets - Speed up page generation.

• TypeScript & ESLint & stylelint - Ensure code quality.

• husky & lint-staged + commitlint - Ensure commit quality.

• Automatic sorting of ES6 imports and CSS properties to improve coding consistency.

• Separate configurations for multiple environments, allowing you to configure each environment however you like.

 Business Features

• Pull down to refresh pages (global + local).

• Pull up to load more content.

• Navigation bar: Back or return to the home page.

• Navigation bar gradient (WeChat + H5 + App).

• Custom navigation bar with top layout adapted to different device models.

• WeChat Mini Program sharing (friends + Moments).

• WeChat login

• Non-WeChat login (H5 and App).

• One-click WeChat login (based on mobile phone number) - Requires a non-personal verified account.

• WeChat Mini Program avatar and nickname retrieval + privacy policy.

• WeChat Mini Program vconsole debugging.

• Multilingual templates.

• Floating page button (floating bubble).

• Multiple tab-based list functionality.

• Waterfall layout.

• Route interception.

• Lucky wheel lottery.

• Lucky grid lottery.

• Personal center inspired by BOSS Zhipin.

• Personal center inspired by Huawei Mall.

• NetEase Cloud Music APP replica (standalone project).

5. Tech Stack

⚙️ Environment

• node>=18

• pnpm>=7.30

 Installation

Run pnpm i to install dependencies.

 Development (Hot Reload Supported)

• Web platform: Run pnpm dev:h5, then open [http://localhost:9000/。](http://localhost:9000/。)

• WeChat platform: Run pnpm dev:mp-weixin, then open WeChat DevTools, import the local folder, and select the dist/dev/mp-weixin file of this project.

• APP platform: Run pnpm dev:app, then open HBuilderX and import the newly generated dist/dev/app folder. Select Run on Emulator (recommended during development) or run on an Android/iOS base runtime.

 Build and Release

• Web platform: Run pnpm build:h5. The generated files are located in dist/build/h5 and can be deployed to a web server such as Nginx. If the final deployment location is not the root directory, modify the h5.router.base property in the manifest.config.ts file.

• WeChat platform: Run pnpm build:mp-weixin. The generated files are located in dist/build/mp-weixin. Import them using WeChat DevTools, then click the Upload button in the upper-right corner.

• APP platform: Run pnpm build:app, then open HBuilderX and import the newly generated dist/build/app folder. Select Publish - APP Cloud Packaging.