vite-ts-starter — Vue 后台模板

SHA-256: ecb15f6c085259a17b1c306dd114e06a9b24e5d5e506a9a86ff01f7044f57419

2026-10-04T12:25:18.860Z

# vite-ts-starter

English | [中文](README-zh.md)

[![Deploy](https://github.com/pdsuwwz/vite-ts-starter/workflows/gh-pages/badge.svg)](https://github.com/pdsuwwz/vite-ts-starter/actions/workflows/deploy.yml)
[![GitHub Workflow Status (branch)](https://img.shields.io/github/actions/workflow/status/pdsuwwz/vite-ts-starter/deploy.yml?branch=main)](https://github.com/pdsuwwz/vite-ts-starter/deployments/activity_log?environment=github-pages)
[![thanks](https://badgen.net/badge/thanks/♥/pink)](https://github.com/pdsuwwz)
[![License](https://img.shields.io/github/license/pdsuwwz/vite-ts-starter?color=blue)](https://github.com/pdsuwwz/vite-ts-starter/blob/main/LICENSE)

🐬 A Starter template built on Vite 7.x + Vue 3.x + Element Plus 2.x + TypeScript + Husky + lint-staged.

A ready-to-use prototype template framework for quickly developing management systems using Vue3 + Vite7 + TS, with continuous updates on the latest tech stack 💪

[🚀 Online Playground](https://pdsuwwz.github.io/vite-ts-starter/#en)


## 🌱 Different Versions
Five different tech stack repo templates are maintained. Try them and pick the one that fits you.

- 💥 (Recommended) [TS + Pinia + 🌐 Low-coupling (i18n) multilingual Vite7 + Vue3 + TS + Element-Plus2 + vue-i18n@next](https://github.com/pdsuwwz/vue-boilerplate-i18n)

- ⚡️ TS + Pinia [Vite5 + Vue3 + TS + Pinia + Element-Plus2 + useLocale + i18n](https://github.com/pdsuwwz/pinia-starter-ts)
- ⚡️ JS + Pinia [Vite5 + Vue3 + Pinia + Element-Plus2 + useLocale + i18n](https://github.com/pdsuwwz/vite-pinia-starter)

- ⚡️ TS + Vuex4 (Current Repo)[Vite7 + Vue3 + TS + Vuex4 + Element-Plus2 + useLocale + i18n](https://github.com/pdsuwwz/vite-ts-starter)
- ⚡️ JS + Vuex4 [Vite5 + Vue3 + Vuex4 + Element-Plus2 + useLocale + i18n](https://github.com/pdsuwwz/vite-starter)

## 🪄 Using Different UI Libraries

If you prefer using [Naive UI](https://www.naiveui.com/) as your UI library, we've also prepared several corresponding template projects for you. You can use these as a foundation for secondary business development and customization:

- 🏄‍♂️ [Naive UI basic template](https://github.com/pdsuwwz/vite-naive-template)
- 🗂️ [Naive UI Tab switching demo](https://github.com/pdsuwwz/vue3-tab-demo)


## 🎉 Features

* Supports __Vite 7 + Vue 3 + TypeScript__
* UI framework: __Element Plus 2.x__
* State management: __Vuex 4__
* Code standardization: __Husky + lint-staged__
* Unit testing framework: ~~__Jest__~~ upgraded to __Vitest__
* Built-in __ESlint__ and __Stylelint__, expandable for your desired Lint configuration
* Built-in encapsulation of a **potentially useful** Axios, to be used with Vuex Actions when needed
* Encapsulated \<IconFont \/> component for direct use of IconFont icons
* Built-in global **$ModalDialog** plugin, supports dynamic service-style calls to display any component
* Built-in i18n, supports language switching at VueRouter route level, allows writing internationalization config files and extending other languages
* Pre-configured route authentication, along with Nprogress, just modify the `permission.ts` file
* Comes with a modular component development environment, allowing decoupling of page components, route components, styles, etc. in the modules directory
* Highly encapsulated yet flexible, with an abstracted complete business process for reference, involving three core pages: login, list, and details
* Saves your configuration time, the project's **lightweight** nature allows you to focus solely on writing your business code


## Environment Support

* Vue 3.x
* Node >= 22.12.x
* Pnpm 9.x
* **VSCode Extension `dbaeumer.vscode-eslint` >= v3.0.5 (pre-release)**


## Screenshot

<img width="1440" alt="image" src="https://user-images.githubusercontent.com/19891724/154829635-46de24db-e4c5-409f-9fa5-6a9770ace166.png">
<img width="1440" alt="image" src="https://user-images.githubusercontent.com/19891724/154829667-a84787b0-0104-4466-bb9e-9f586be66778.png">


## Install

Run `pnpm i` to install the dependencies.

```bash
pnpm i
```

## Run

Run `pnpm dev` to start the frontend dev server.

```bash
pnpm dev
```

## Test

Unit Testing.

```bash
pnpm test
```

Test code coverage.

```bash
pnpm test:coverage
```

## 🌍 Internationalization (i18n) Setup

This project supports multi-language settings, with `English` as the default language.

### Default Language Configuration


The default language is set through the [`defaultLanguageLocale`](src/locales/index.ts#L43) constant. To change the default language, simply modify the value of this constant:

```ts
export const defaultLanguageLocale = 'en'
```

### Extending Supported Languages

The project currently supports the following languages, as detailed in [src/locales/index.ts](src/locales/index.ts#L13):

```ts
export const localesMapping = [
  {
    localeCode: 'zh-hans',
    localeName: '简体中文',
    localeLang: {...}
  },
  {
    localeCode: 'en',
    localeName: 'English',
    localeLang: {...}
  }
]
```

To add support for a new language:

  * Add a new language object to the [`localesMapping`](src/locales/index.ts#L13) array
  * Create a corresponding language file in the [`src/locales/lang/`](src/locales/lang/) directory (e.g., de.ts for German)

    ```
    ./lang
    ├── en.ts
    └── zh-hans.ts
    ```
  * Import and merge the `Element Plus` language pack and custom language file, ensuring both UI components and custom content are localized.


## 💡 Tip

* If Husky is not working, it may be due to incomplete initialization. Try running the following command to initialize:

```bash
pnpm run prepare
```


## 😎 Awesome

* [awesome-vite](https://github.com/pdsuwwz/awesome-vite)