Vite Vue2 Ts Starter

Overview

The Vue 3 + Typescript + Vite Starter is a template that allows developers to quickly get started with developing applications using Vue 3 and Typescript in Vite. This template utilizes Vue 3 script setup SFCs and includes additional tools such as vue-router and Pinia for state management. It also comes pre-configured with ESLint, Stylelint, and Prettier for automatic code formatting and linting. The template provides a seamless development experience with real-time checking by vite-plugin-checker. To use the template, developers need to define the VITE_APP_TITLE in their .env file and set up their IDE with VSCode and Volar.

Features

• Vue 3 script setup SFCs: Utilize Vue 3 script setup SFCs for easier and more concise code organization.
• Vue-router: Integrated vue-router for managing application routing.
• Pinia: Recommends using Pinia as the state management library to replace Vuex in future Vue versions.
• ESLint, Stylelint, and Prettier: Included tools for automatic code formatting and linting.
• Real-time checking: Development server is checked in real-time by vite-plugin-checker.

Installation

To install and use the Vue 3 + Typescript + Vite Starter, follow these steps:

1. Define VITE_APP_TITLE in your .env file.
2. Set up your IDE with VSCode and Volar (disable Vetur for better performance).
3. Use Volar Takeover Mode for improved performance.

Npm commands:

• dev: Start the development server.
• clean: Clear the development server cache.
• type-check: Check Vue markup.
• lint: Run ESLint and Prettier.
• lint:style: Run Stylelint.
• test: Run vitest.
• test:unit: Run unit tests.
• coverage: Generate a coverage report.
• build: Build for production.
• build:analyze: Execute Bundle Analyzer.
• build:clean: Clear production build files.
• build-only: Build for production without checking (for deployment use).
• preview: Run the program generated by the production build.

Summary

The Vue 3 + Typescript + Vite Starter is a template that provides developers with a streamlined way to start developing Vue 3 applications using Typescript and Vite. It offers various features, including support for Vue 3 SFCs, integrated vue-router, Pinia for state management, and tools like ESLint, Stylelint, and Prettier for code formatting and linting. The template also ensures a smooth development experience with real-time checking by vite-plugin-checker. With easy installation and a range of commands for different development tasks, this starter template is a valuable resource for Vue 3 and Typescript developers.