Vue3 Template by Ywanzhou - A Vite Template

Vue3 Template

一个 Vue3 + TS + Vite + Element-Plus 开箱即用的企业级开发模板。

Overview

vue3-template is an out-of-the-box enterprise-level development template for Vue3 + TS + Vite + Element-Plus. It comes with several useful features such as support for ViteUI framework, Element-Plus with dark mode, TailwindCSS for CSS styling, Pinia for state management, pre-configured ESlint and Prettier for code validation and formatting, a well-encapsulated axios library, automatic importing of Vue and VueRouter APIs, a pre-built dynamic routing system, and a Plop scaffolding tool for faster file creation. The template is clean and requires minimal customization, making it ideal for quick project setup. It is also compatible with npm package manager.

Features

Vue3.2 Template: Built on the latest Vue3.2 version, providing updated features and improvements.
ViteUI Framework: Integrated with ViteUI framework for enhanced development experience.
Element-Plus with Dark Mode: Supports Element-Plus UI library with built-in dark mode feature.
TailwindCSS: Utilizes TailwindCSS for efficient and customizable CSS styling.
Pinia: Includes Pinia for effective state management.
ESlint + Prettier: Preconfigured ESlint and Prettier for code validation and formatting.
Git Commit Validation: Configured to validate Git commits and adhere to submission standards.
Encapsulated Axios: Complete and well-encapsulated axios library for simplified API requests.
Automatic API Import: Automatically imports Vue and VueRouter APIs, with the ability to configure additional API imports.
Dynamic Routing: Includes a basic version of dynamic routing for reference and customization.
Plop Scaffolding: Pre-installed Plop scaffolding tool for faster creation of similar file types.

Project Setup

Install the dependencies by running the following command:
```
npm install
```
Start the development server by running the following command:
```
npm run dev
```

Build and Preview

To build and preview the project, follow these steps:

Build the project by running the following command:
```
npm run build
```
Start a local server to preview the built project by running the following command:
```
npm run serve
```

Code Linting and Formatting

To lint the code and ensure proper formatting, use the following command:

npm run lint

Summary

vue3-template is a comprehensive development template for enterprise-level Vue3 projects. With its pre-configured features and libraries, such as ViteUI, Element-Plus, TailwindCSS, Pinia, and axios, it offers a quick and efficient setup for developers. The template's support for automatic API import and dynamic routing further simplifies the development process. Additionally, the included Plop scaffolding tool enables faster file creation. Overall, the template provides a clean and customizable foundation for Vue3 projects, ensuring a smoother development experience. The project is open source and licensed under the MIT license.