Vue3 H5 Template

Overview:

This is a mobile-first project template built with Vue3, TypeScript, and Vite. It comes with a range of features and tools such as Vue-router 4, Vant4 component library, Tailwindcss atomic class framework, Pinia state management, support for dark mode, vw viewport adaptation, Axios wrapper, resource compression during packaging, support for mock data in development environment, ESLint, first screen loading animation, and development debugging panel. It also has guidelines for importing vant components on demand, using SVG icons, router caching, dynamic page title setting, mock data in development environment, vw viewport adaptation, Tailwindcss atomic class framework, Git commit message convention, and CDN dependency loading in production environment.

Features:

• Vue3 + Vite4: Built with the latest versions of Vue and Vite for optimal performance.
• TypeScript: Written in TypeScript for type safety and improved developer experience.
• Vant4 Component Library: Utilizes the Vant4 component library for a wide range of pre-designed UI components.
• Tailwindcss Atomic Class Framework: Uses the Tailwindcss framework for easy and efficient styling.
• Pinia State Management: Implements the Pinia state management solution for managing application state.
• Support for Dark Mode: Provides support for dark mode to enhance user experience.
• Vue-router 4: Uses Vue-router 4 for efficient and flexible routing.
• SVG Icon Component Auto Registration: Automatically registers SVG icons as components for seamless integration.
• VW Viewport Adaptation: Adapts the viewport using VW units for responsive design.
• Axios Wrapper: Includes a wrapper for Axios for simplified HTTP requests.
• Resource Compression during Packaging: Compresses resources during packaging to improve performance.
• Support for Mock Data in Development Environment: Enables the use of mock data during development for testing purposes.
• ESLint: Includes ESLint for code linting and error prevention.
• First Screen Loading Animation: Displays a loading animation on the first screen for a smoother user experience.
• Development Debugging Panel: Provides a debugging panel in the development environment for easier troubleshooting.

Installation:

To use this project template, make sure you have Node version 16+ installed. You can use nvm to manage your local Node version. It is also recommended to use pnpm as the package manager.

Once you have the required dependencies, you can clone the project and install the necessary packages by running the following commands:

git clone [project-url]
cd [project-directory]
pnpm install

After the installation is complete, you can start the development server by running:

pnpm dev

Summary:

This is a feature-rich mobile-first project template built with Vue3, TypeScript, and Vite. It includes a range of tools and libraries such as Vant4, Tailwindcss, Pinia, and Axios to provide a seamless development experience. With support for dark mode, SVG icon integration, router caching, and resource compression, this template offers great flexibility and performance optimization. It also includes features like development debugging panel, first screen loading animation, and mock data support for easier development and testing.