lemon-template-vue

English / 简体中文

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

Docs / Feedback

---

Introduction

🚀🚀🚀 lemon-template-vue is built using the latest technologies, including Vue 3.5, Vite 6, Vant 4, Pinia, TypeScript, and UnoCSS. It integrates features like Dark Mode, system theme colors, and Mock data.

You can directly start developing your business logic on 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 Demo (Switch to mobile view on PC browsers)

Other Templates

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

Features

• ⚡️ Developed with Vue 3.5 + TypeScript using ＜script setup＞ single-file components
• ✨ Uses Vite 6 as the development and build tool (includes Gzip packaging, TSX syntax, proxy support, etc.)
• 🍕 Fully integrates TypeScript
• 🍍 Replaces Vuex with Pinia, offering lightweight and easy-to-use state management, with Pinia persistence plugin integrated
• 📦 Automatic component loading
• 🎨 Vant 4 component library
• 🌀 UnoCSS for instant atomic CSS
• 👏 Integrates multiple icon solutions
• 🌓 Supports Dark Mode
• 🌍 Multi-language support with i18n
• 🔥 ECharts for data visualization, with useECharts Hooks
• ⚙️ Unit testing using Vitest
• ☁️ Axios encapsulation
• 💾 Local Mock data support
• 📱 Browser compatibility with viewport vw/vh units for layouts
• 📥 Gzip compression for packaged resources
• 🛡️ Splash screen animation for first load
• 💪 Eslint for code linting, with Prettier for formatting
• 🌈 Uses simple-git-hooks, lint-staged, and commitlint for commit message standards

Prerequisites

Familiarity with the following concepts will help you use this template effectively:

• Vue 3 - Basic syntax of Vue 3
• Vite - Features of Vite
• Pinia - Features of Pinia
• TypeScript - Basic syntax of TypeScript
• Vue Router - Basic usage of Vue Router
• Icones - Recommended icon library for this project
• UnoCSS - High-performance, flexible atomic CSS engine
• Vant - Mobile Vue component library
• ECharts 5 - Basic usage of ECharts
• Mock.js - Basic syntax of Mock.js
• ES6+ - Basic syntax of ES6

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 efficiency and code formatting:

• Vue - Official - Essential for Vue development
• UnoCSS - UnoCSS support
• DotENV - .env file highlighting
• Error Lens - Better error visualization
• EditorConfig for VS Code - Maintain consistent coding styles across IDEs
• ESLint - Script linting
• i18n Ally - All-in-one i18n support
• JavaScript and TypeScript VSCode Snippets - JS and TS snippets
• Vue Collection VSCode Snippets - Vue 2/3 snippets

Usage

Use the Scaffold

In development

GitHub Template

Use this template to create a repository

Clone

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

# Enter the project directory
cd lemon-template-vue

# Install dependencies (use pnpm)
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 tools or auxiliary libraries (does not affect source files or tests)
• revert: Revert a previous 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