Overview

This product is a basic template built with Vite2, Vue3.2, TypeScript, Pinia, mock, sass, vantUI, and viewport adaptation. It also includes features such as axios encapsulation, multiple environment variable configuration, alias configuration, global Sass styling, Vue-router, Pinia state management, mock data usage, proxy configuration, static resource usage, Axios encapsulation and API management, viewport adaptation, and more.

Features

• Vue3.2 + TypeScript + Pinia + mock + sass + vantUI + viewport adaptation + axios encapsulation
• Fast development startup, hot-reloading, and packaging speeds compared to Vue-cli
• Multiple environment variable configuration
• Alias configuration for easy import
• Global Sass styling
• Vue-router integration
• Pinia state management
• Mock data usage
• Proxy configuration
• Static resource usage
• Axios encapsulation and API management
• Viewport adaptation
• Apple bottom safe distance adaptation
• Dynamic title setting
• Jssdk configuration
• Eslint + Prettier development rules
• husky + lint-staged commit validation
• Packaging optimization

Installation

To install this template, follow these steps:

1. Make sure you have Node.js version 17.2.0 installed.
2. Install the pnpm package manager. If you don’t have it, install it first.
3. Clone the project repository from the specified GitHub link.
4. Configure the IP access for the project in the vite.config.js file.
5. Configure multiple environment variables according to the provided documentation.
6. Configure alias for easy import.
7. Install the required dependencies and start the project.
8. Use the create-vue command to initialize the project.
9. Set up IP access for the project by adding the server.host property in vite.config.js.
10. Configure multiple environment variables by creating the necessary files and defining the environment variables.
11. Configure aliases for easy import.
12. Set up global Sass styles by installing the necessary dependencies and configuring the vite.config.js file.
13. Integrate Vue-router in the project by following the provided documentation.
14. Configure Pinia state management by following the provided documentation.
15. Use mock data by following the provided documentation.
16. Configure proxy for cross-origin requests.
17. Use static resources in the project.
18. Encapsulate Axios and manage APIs.
19. Use viewport adaptation for better responsiveness.
20. Adapt to Apple bottom safe distance in mobile devices.
21. Set dynamic title in the project.
22. Configure Jssdk.
23. Apply Eslint + Prettier development rules.
24. Set up commit validation using husky + lint-staged.
25. Optimize the project’s packaging.

Summary

This product is a basic template built with Vite2 and Vue3.2, along with several other technologies, such as TypeScript, Pinia, mock, sass, vantUI, and viewport adaptation. It offers various features like fast development startup, hot-reloading, and packaging speeds, multiple environment variable configuration, alias configuration, global Sass styling, Vue-router integration, Pinia state management, mock data usage, proxy configuration, static resource usage, Axios encapsulation and API management, viewport adaptation, and more. The installation guide provides step-by-step instructions on how to set up and configure the template.