lemon-mobile-vue

English / 简体中文

A mobile web apps template based on the Vue 3 ecosystem.

Documentation / Feedback

---

Introduction

🚀🚀🚀 lemon-mobile-vue is built using the latest mainstream technologies, including Vue3.5, Vite8, TanStack Query, Vant, Pinia, TypeScript, and Tailwind CSS V4. It integrates features like Dark Mode, system theme colors, and Mock data support.

You can directly start developing your business logic on top of this template! Hope you enjoy it. 👋👋👋

Note

If this project is helpful to you, please click the "Star" button in the top-right corner. Thank you!

Preview

👓 Click here (Switch to mobile view on PC browsers)

Other Templates

• lemon-mobile-react - A mobile web apps template based on the React ecosystem
• lemon-mobile-uniapp - A mobile mini-program template based on the UniApp ecosystem

Features

• ⚡️ Developed with Vue 3.5 + TypeScript using ＜script setup＞ single-file components
• ✨ Uses Vite 8 as the development and build tool (includes Gzip packaging, TSX syntax, proxy support, etc.)
• 🍕 Fully integrates TypeScript
• 🚦 Uses Vue Router for routing management, providing a type-safe file-based routing system
• 🔄 Uses TanStack Query for server state management, simplifying data fetching and caching
• 🍍 Replaces Vuex with Pinia, offering lightweight, simple, and easy-to-use state management, with Pinia persistence plugin integrated
• 📦 Automatic component loading
• 🎨 Vant 4 component library
• 🌀 Tailwind CSS instant atomic CSS engine
• 👏 Integrates multiple icon solutions
• 🌓 Supports Dark Mode
• 🌍 Multi-language internationalization with i18n support
• 🔥 Integrates ECharts for data visualization, with encapsulated useECharts Hooks
• ⚙️ Unit testing using Vitest
• ☁️ Axios encapsulation
• 💾 Local Mock data simulation support
• 📱 Browser compatibility
• 📥 Gzip compression for packaged resources
• 🛡️ Splash screen loading animation
• 💪 Integrates ESLint for code linting, with the ESLint configuration using Prettier for code formatting by default
• 🌈 Uses simple-git-hooks, lint-staged, and commitlint to standardize commit messages

Prerequisites

Familiarity with the following concepts will be very helpful when using this project:

• Vue 3 - Familiarize yourself with Vue 3 basic syntax
• Vite - Familiarize yourself with Vite features
• Pinia - Familiarize yourself with Pinia features
• TypeScript - Familiarize yourself with TypeScript basic syntax
• Vue Router - Familiarize yourself with Vue Router basic usage
• Icones - Recommended icon library for this project, though you can also use SVG Icon
• Tailwind CSS - High-performance and highly flexible instant atomic CSS engine
• Vant - Mobile Vue component library
• ECharts - Familiarize yourself with ECharts basic usage
• Mock.js - Understand Mock.js basic syntax
• ES6+ - Familiarize yourself with ES6 basic syntax

Environment Setup

Ensure the following tools are installed locally: Pnpm, Node.js, and Git.

• Use pnpm >= 8.15.4 to avoid dependency installation and build errors.
• Node.js version 18.x or above is required. Recommended: ^18.18.0 || >=20.0.0.

VSCode Extensions

If you use VSCode (recommended), install the following extensions for improved development efficiency and code formatting:

• Vue - Official - Essential for Vue development
• Tailwind CSS IntelliSense - Tailwind CSS IntelliSense plugin
• DotENV - .env file highlighting
• Error Lens - Better error visualization
• EditorConfig for VS Code - Maintain consistent coding styles across different IDEs
• ESLint - Script code linting
• i18n Ally - All-in-one i18n support
• JavaScript and TypeScript VSCode Snippets - JavaScript and TypeScript code snippets

Usage

Use the Scaffold

# Copy command - replace 'project' with your project name
pnpm create lemon project -t mobile-vue

GitHub Template

Use this template to create a repository

Clone

# Clone the project
git clone https://github.com/sankeyangshu/lemon-mobile-vue.git

# Enter the project directory
cd lemon-mobile-vue

# Install dependencies - pnpm is recommended
pnpm install

# Start the development server
pnpm dev

# Build for production
pnpm build

Git Commit Guidelines

Commit Standards

The project enforces Git commit messages using simple-git-hooks and commitlint, adhering to the widely adopted Angular guidelines.

• feat: Add new features
• fix: Fix bugs
• docs: Documentation changes
• style: Code formatting (does not affect functionality, e.g., spacing, semicolons, etc.)
• refactor: Code refactoring (neither bug fixes nor new features)
• perf: Performance optimizations
• test: Add or update test cases
• build: Changes to build process or external dependencies (e.g., updating npm packages, modifying webpack configuration)
• ci: Changes to CI configuration or scripts
• chore: Changes to build process or auxiliary tools and libraries (does not affect source files or test cases)
• revert: Revert a commit

Community

You can use issues to report problems or submit a Pull Request.

Browser Support

• For local development, we recommend using the latest version of Chrome. Download.
• The production environment supports modern browsers. IE is no longer supported. For more details on browser support, check Can I Use ES Module.

IE	Edge	Firefox	Chrome	Safari
not support	last 2 versions	last 2 versions	last 2 versions	last 2 versions

License

MIT License © 2023-PRESENT sankeyangshu