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

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

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

• 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

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

Run pnpm i to install the dependencies.

pnpm i

Run pnpm dev to start the frontend dev server.

pnpm dev

Unit Testing.

pnpm test

Test code coverage.

pnpm test:coverage

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

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'

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.

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

pnpm run prepare

• awesome-vite