Introduction

lemon-template-vue is a mobile web application template based on the Vue 3 ecosystem, using the latest Vue3.5, Vite6, Vant4, Pinia, Typescript, UnoCSS and other mainstream technologies. It comes with built-in layout, request encapsulation, request interception, login interception, and other basic functionalities. It also provides commonly used components in business applications, such as Dark Mode, i18n, Mock, ECharts, Pinia persistence, KeepAlive, and more examples. Using a modular design, it requires no additional configuration and is ready to use out of the box, allowing developers to focus on business logic development.

Online Preview

👓 Click here (Please switch to mobile mode in PC browser)

Features

⚡️ Developed with Vue3.5 + TypeScript, single-file components ＜script setup＞
✨ Uses Vite6 as project development and build tool (configured with Gzip packaging, TSX syntax, cross-origin proxy...)
🍕 Full project integration with TypeScript
🍍 Uses Pinia instead of Vuex, lightweight, simple, easy to use, integrated with Pinia persistence plugin
📦 Automatic component loading
🎨 Vant4 component library
🌀 UnoCSS instant atomic CSS engine
👏 Integrated multiple icon solutions
🌓 Support for dark mode
🌍 Multi-language internationalization, supports i18n solution
🔥 Integrated Echarts data visualization charts, encapsulated useECharts Hooks
⚙️ Uses Vitest for unit testing
☁️ Axios encapsulation
💾 Support for local Mock data simulation
📱 Browser adaptation - uses viewport vw/vh units for layout
📥 Package resource gzip compression
🛡️ First screen loading animation
💪 Integrated Eslint code validation standard, and this Eslint configuration defaults to using Prettier for code formatting
🌈 Uses simple-git-hooks, lint-staged, commitlint to standardize commit messages

Basic Knowledge

Understanding and learning these technologies in advance will greatly help in using this project.

Vue3 - Familiar with Vue3 basic syntax
Vite - Familiar with Vite features
Pinia - Familiar with Pinia features
TypeScript - Familiar with TypeScript basic syntax
Vue-Router - Familiar with basic use of Vue-Router
Icones - Recommended icon library for this project, you can also use IconSVg
UnoCSS - High-performance and highly flexible instant atomic CSS engine
Vant - Mobile Vue component library
ECharts5 - Familiar with basic use of Echarts
Mock.js - Understand basic Mockjs syntax
Es6+ - Familiar with ES6 basic syntax

Browser Support

For local development, we recommend using the latest version of Chrome browser Download.
Production environment supports modern browsers, no longer supports IE browser, for more browser compatibility information, please check Can I Use Es Module.