vite-ts-starter

English | 中文

🐬 A Starter template built on Vite 5.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 + Vite5 + TS, with continuous updates on the latest tech stack 💪

🚀 Online Playground

🌱 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 Vite5 + Vue3 + TS + Element-Plus2 + vue-i18n@next

• ⚡️ TS + Pinia Vite5 + Vue3 + TS + Pinia + Element-Plus2 + useLocale + i18n

• ⚡️ JS + Pinia Vite5 + Vue3 + Pinia + Element-Plus2 + useLocale + i18n

• ⚡️ TS + Vuex4 (Current Repo)Vite5 + Vue3 + TS + Vuex4 + Element-Plus2 + useLocale + i18n

• ⚡️ JS + Vuex4 Vite5 + Vue3 + Vuex4 + Element-Plus2 + useLocale + i18n

🪄 Using Different UI Libraries

If you prefer using Naive UI 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
• 🗂️ Naive UI Tab switching demo

🎉 Features

• Supports Vite 5 + 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 >= 18.12.x
• Pnpm 9.x
• VSCode Extension dbaeumer.vscode-eslint >= v3.0.5 (pre-release)

Screenshot

Install

Run pnpm i to install the dependencies.

pnpm i

Run

Run pnpm dev to start the frontend dev server.

pnpm dev

Test

Unit Testing.

pnpm test

Test code coverage.

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 constant. To change the default language, simply modify the value of this constant:

export const defaultLanguageLocale = 'en'

Extending Supported Languages

The project currently supports the following languages, as detailed in src/locales/index.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 array

• Create a corresponding language file in the 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:

pnpm run prepare

😎 Awesome

• awesome-vite