pdsuwwz / vite-ts-starter

🐬 一个轻量级、开箱即用、快速开发 Vue3 (setup) 全家桶 + i18n 国际化 + Vite 5 + Element-Plus + UnoCSS + Vuex + TypeScript + Unplugin + ESLint(v9) + Vitest + Scss + StyleLint + Husky + lint-staged 中小型 B 端中后台管理系统的现代开发基础模板框架, 持续更新最新技术栈, 更贴近真实项目的脚手架 💪 A template built on Vite5 + Vitest + Vue 3 (附示例截图)

vite-ts-starter

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

一个开箱即用，适合快速开发 Vue3 + Vite5 + TS 中小型 B 端后台管理系统的原型模板项目框架，持续更新最新技术栈 💪

🚀 Live Demo 在线体验

🌱 不同版本

目前一共有以下五个不同技术栈的仓库模板在持续维护，请尝试后选择适合自己的模板使用

• 💥 (推荐) TS + Pinia + 🌐 低耦合(i18n)多语言 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 版 (当前仓库)Vite5 + Vue3 + TS + Vuex4 + Element-Plus2 + useLocale + i18n

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

🪄 使用不同的 UI 库

如果更偏好使用 Naive UI 作为 UI 库, 这里也为你准备了几个相应的模板项目，可在此基础上进行业务二次开发和定制：

• 🏄‍♂️ Naive UI 基础模板，集成常用技术栈
• 🗂️ 基于 Naive UI 的 Tab 多页签切换选项卡演示

🎉 Features

• 支持 Vite 5 + Vue 3 + TypeScript
• UI 框架: Element Plus 2.x
• 状态管理: Vuex 4
• 代码规范化检测: Husky + lint-staged
• 单元测试框架: Jest 升级为 Vitest
• 内置 ESlint 和 Stylelint, 可在此基础上扩展你想要的 Lint 配置规范
• 内置封装了一个可能比较好用的 Axios , 需要时配合 Vuex Actions 一起食用
• 封装了 <IconFont /> 组件, 可直接使用 IconFont 图标
• 内置全局 $ModalDialog 插件, 支持使用 service 式地动态调用此插件来显示任意组件
• 内置 i18n, 支持到 VueRouter 路由级别切换语言，可编写国际化配置文件及扩展其他语言
• 路由鉴权已帮你封装好，同时配合 Nprogress, 只需要修改 permission.ts 文件即可
• 自带一个模块化的组件开发环境，可按照 modules 目录解耦页面组件、路由组件、样式等文件
• 高度封装但不失灵活，内部抽象出了一个完整的业务流程供你参考，涉及三个核心页面：登录、列表和明细
• 节省你配置的时间，因此该项目的轻量化致使你只需要专心编写自己的业务代码即可

前置条件

• Vue 3.x
• Node >= 16.15.x
• Pnpm 8.x
• VS Code 插件 dbaeumer.vscode-eslint >= v3.0.5 (pre-release)

运行效果截图

安装和运行

• 安装依赖

pnpm i

• 本地开发

pnpm dev

单元测试

• 执行单测

pnpm test

• 执行覆盖率测试

pnpm test:coverage

💡 提示

• 若 Husky 未生效，可能是由于未完成初始化，尝试执行以下命令进行初始化:

pnpm run prepare

😎 Awesome

• awesome-vite

vite-ts-starter's Issues

[BUG] ReferenceError: Vue is not defined for @vue/test-utils v2.0.0

refer: pdsuwwz/vue-unit#18

Dependency Dashboard

This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

Open

These updates have all been created already. Click a checkbox below to force a retry/rebase of any.

• Update babel monorepo to v7.24.6 (@babel/core, @babel/preset-env)
• Update dependency @iconify/json to v2.2.214
• Update dependency axios to v1.7.2
• Update dependency lint-staged to v15.2.5
• Update dependency jsdom to v24.1.0
• Update dependency rollup to v4.18.0
• Update dependency stylelint to v16.6.0
• Update typescript-eslint monorepo to v7.11.0 (@typescript-eslint/eslint-plugin, @typescript-eslint/parser)
• Update peaceiris/actions-gh-pages action to v4
• Update pnpm/action-setup action to v4
• Click on this checkbox to rebase all open PRs at once

Detected dependencies

github-actions

.github/workflows/deploy.yml

• actions/checkout v4
• actions/setup-node v4
• pnpm/action-setup v3.0.0
• peaceiris/actions-gh-pages v3

npm

package.json

• @element-plus/icons-vue 2.3.1
• axios 1.7.1
• echarts ^5.5.0
• element-plus 2.7.3
• js-cookie ^3.0.5
• lodash-es ^4.17.21
• nprogress ^0.2.0
• vue ^3.4.27
• vue-router ^4.3.2
• vuex ^4.1.0
• @babel/core ^7.24.5
• @babel/preset-env ^7.24.5
• @eslint/js ^9.3.0
• @iconify/json ^2.2.212
• @iconify/vue ^4.1.2
• @stylistic/eslint-plugin ^2.1.0
• @stylistic/stylelint-plugin ^2.1.2
• @types/js-cookie ^3.0.6
• @types/lodash-es ^4.17.12
• @types/node ^20.12.12
• @types/nprogress ^0.2.3
• @typescript-eslint/eslint-plugin ^7.10.0
• @typescript-eslint/parser ^7.10.0
• @vitejs/plugin-vue ^5.0.4
• @vitest/coverage-v8 ^1.6.0
• @vue/compiler-sfc ^3.4.27
• @vue/test-utils 2.4.6
• babel-plugin-transform-vite-meta-env ^1.0.3
• cross-env ^7.0.3
• eslint ^9.3.0
• eslint-define-config ^2.1.0
• eslint-plugin-html 8.1.1
• eslint-plugin-import ^2.29.1
• eslint-plugin-vue 9.26.0
• globals ^15.3.0
• husky ^9.0.11
• jsdom ^24.0.0
• lint-staged ^15.2.2
• postcss ^8.4.38
• postcss-html ^1.7.0
• postcss-scss ^4.0.9
• rollup 4.17.2
• sass ^1.77.2
• stylelint ^16.5.0
• stylelint-config-recommended-scss ^14.0.0
• stylelint-config-recommended-vue ^1.5.0
• stylelint-config-standard ^36.0.0
• stylelint-config-standard-scss 13.1.0
• typescript ^5.4.5
• unocss ^0.60.3
• unplugin-auto-import ^0.17.6
• unplugin-icons ^0.19.0
• unplugin-vue-components ^0.27.0
• vite ^5.2.11
• vitest ^1.6.0
• vue-eslint-parser ^9.4.2
• node >=16.15.0
• pnpm >= 8.14.x

---

• Check this box to trigger a request for Renovate to run again on this repository

Remove background color for input box internal autofill

Use a Vuex Store with Types in TypeScript