<div align="center"> <img alt="logo" width="120" height="120" src="./public/favicon.png"> <h1>Mobile + Vue = MobVue</h1> </div>

<b>English | <a href="./README.zh-CN.md">中文</a></b>

Introduction

MobVue is a well-crafted mobile web app template, built with popular technologies such as Vue3, Vite, TypeScript, and Vant

Notifications

[!NOTE] Powered by love! All source code is free and open-source. If you find it helpful, feel free to give a star to support!

[!TIP] Paid services are officially launched! If you don’t want to do it yourself but want to remove TS or other modules, try the lazy package! Click to check it out

Usage

<details> <summary>Recommended Environment</summary> <br>

Latest version of Visual Studio Code or AI IDE Cursor and Trae
Install the recommended plugins in the .vscode/extensions.json file
node 20.19+ or 22.12+
pnpm 10+
bun latest

</details> <details> <summary>Local Development</summary> <br>

Using Node + pnpm

# Install dependencies
pnpm i

# Start the development server
pnpm dev

Using Bun

bun i

bun run dev

</details> <details> <summary>Build</summary> <br>

Using Node + pnpm

# Build for the staging environment
pnpm build:staging

# Build for the production environment
pnpm build

Using Bun

bun run build:staging

bun run build

</details> <details> <summary>Local Preview</summary> <br>

Using Node + pnpm

# Execute the build command first to generate the dist directory, then run the preview command
pnpm preview

Using Bun

bun run preview

</details> <details> <summary>Code Check</summary> <br>

Using Node + pnpm

# Code linting and formatting
pnpm lint

# Unit tests
pnpm test

Using Bun

bun run lint

bun run test

</details> <details> <summary>Commit Guidelines</summary> <br>

feat New feature

fix Bug fix

perf Performance improvement

refactor Code refactoring

docs Documentation and comments

types Type-related changes

test Unit tests related

ci Continuous integration, workflows

revert Revert changes

chore Chores (update dependencies, modify configurations, etc)

</details>

Links

Online Preview: github-pages

Documentation and Tutorials: link

Backend Management System: v3-admin-vite

Chinese Repository: gitee, atomgit

Chat Group: check how to join

Donations: buy a coffee for the author

Releases & Changelog: releases

Features

🔥 Latest Syntax, Configuration, Dependencies

📍 Pure Level 1 Route Design - Clear and Cache-Friendly

📱 Mobile Adaptation px2vw - Also Wide-Screen Friendly

🌐 Browser Compatibility @vitejs/plugin-legacy + autoprefixer + browserslist - Compatible with multiple browsers and lower versions

🧩 Layout System - Configurable

🔒 Permission Control Page Level, Button Level

🌗 Theme Mode Dark Mode

🫧 Embrace Atomic CSS

📲 PWA - Progressive Web App

🔧 Components and API Auto Import on Demand

🔎 Husky + lint-staged + ESLint - Code Standardization

💪🏻 Still TypeScript - Strict Mode with No any

👀 More Features - Route Cache, Defensive Watermark, Grayscale and Colorblind Mode, SVG Loader, VConsole, White Screen Loading Animation, Unit Tests, I18n

Tech Stack

Vue3: Vue3 + script setup with the latest Vue3 Composition API

Vant: A lightweight, customizable Vue UI library for mobile web apps

Pinia: The legendary Vuex5

Vite: Really fast

Vue Router: The routing system

TypeScript: A superset of JavaScript

pnpm: A faster, disk-space-saving package manager

ESLint: Code linting and formatting

Axios: Sends network requests

UnoCSS: A high-performance, flexible atomic CSS engine

Bun：A fast JavaScript runtime

Project Preview Image

preview

Contributors

A big thank you to all the contributors!

‌WeChat Official Account‌

New attempts, welcome to follow

Mobvue

Install / Use

README

Introduction

Notifications

Usage

Links

Features

Tech Stack

Project Preview Image

Contributors

‌WeChat Official Account‌

License