VueVite后台启动器

vitify-next — Vue 后台模板

作者 kingyue737

基于 Vite 与 Vuetify 的 Vue 3 后台起步模板，提供文件路由、布局系统、Pinia 状态管理与 ECharts 数据可视化等基础结构。

打开源站下载源码 ZIP

看看你的网站会是什么样

浏览真实页面截图，比较内容排版与手机效果。点击下方缩略图切换，放大查看整页细节。

2 个预览视图
桌面端首页1 / 2
桌面端截图首屏预览

由服务器浏览器实际访问页面后截取。

全部页面与视图 2

截图用于了解视觉与布局，交互效果请以实际项目为准。

采集于 2026-10-02查看来源

值得关注的模板亮点

从已有项目资料中，快速了解它的特点。

01

Vite + Vuetify 的 Vue 3 后台起步模板，作者定位为轻量版 Vitify Admin

02

文件式路由与布局系统，导航抽屉和面包屑根据路由自动生成

03

默认布局含抽屉、页头与页脚，内置通知 store 与 vue-echarts 数据可视化

04

支持主题色定制、深色模式与响应式布局

05

集成 Pinia、VueUse、自动导入插件与 TypeScript，含 Vitest、Testing Library 和 Playwright 测试配置

06

相较 Vue 2 版移除了国际化、Mock API、登录页与 axios，保持精简

模板详细介绍

vitify-next 是 Vitify Admin 的轻量 Vue 3 版本，定位为带明确取舍的后台起步模板。它使用 Vite 构建、Vuetify 作为 Material Design 组件框架，并预置 Vue Router、Pinia、VueUse、unplugin-auto-import 与 unplugin-vue-components 等依赖。

模板自带后台常用骨架：默认布局包含抽屉、页头与页脚，导航抽屉与面包屑依据路由自动生成，另有通知 store、基于 vue-echarts 的数据可视化页面、主题色定制与深色模式，以及响应式布局。路由采用文件式组织，页面布局通过 vite-plugin-vue-meta-layouts 关联。

作者明确说明为保持轻量，相比 Vue 2 版 Vitify Admin 去掉了国际化、浏览器兼容处理、Mock API、登录页与 axios，因此它不包含登录鉴权、接口请求封装与多语言能力，需要按项目自行补充。工具链方面包含 TypeScript、Vitest 与 Testing Library 单元/组件测试、Playwright E2E 测试（在 GitHub Actions 中运行）、Prettier 与 ESLint flat config，并可通过 Netlify 零配置部署。仓库采用 MIT 许可。

VueVite后台启动器

适合你的项目吗？

适用场景

  • 需要快速搭建 Vue 3 + Vuetify 后台管理界面骨架的项目
  • 希望以文件路由和布局系统组织多页面后台的团队
  • 需要图表展示、主题定制与深色模式的数据看板类界面
  • 想参考 Vite、Pinia、自动导入与测试工具链组合方式的开发者

适合人群

  • 熟悉 Vue 3 与 Vuetify、希望自行补充业务逻辑的前端开发者
  • 接受模板精简取舍、愿意自行实现登录鉴权与接口请求层的团队
  • 以数据展示和后台导航为主要形态的管理端项目

上手与定制指南

结合仓库当前版本的说明，按下面的资料检查内容、配置与运行要求。

  1. 1

    可通过 GitHub 的 Use this template 生成仓库，或使用 npx degit kingyue737/vitify-next my-vitify-app 克隆到本地

  2. 2

    包管理器使用 pnpm，克隆后执行 pnpm i 安装依赖

  3. 3

    模板不包含登录页、Mock API 与 axios，接口请求与鉴权需自行接入

  4. 4

    部署示例为 Netlify 零配置；演示图片、字体、图标等第三方素材需按各自许可核对

查看仓库使用说明

授权与来源资料

使用条件与限制

免费使用 · 保留许可声明

本次收录的是公开仓库中采用 MIT 许可的免费版本；免费范围为该版本代码，不代表外部服务或第三方素材免费。

使用时需要遵守

  • 允许免费使用、修改、商用和分发该版本代码。
  • 分发代码副本或实质性部分时，保留原作者版权声明和完整 MIT 许可声明。
  • 代码按现状提供；担保与责任限制以原许可证及适用法律为准。

额外费用与待核对事项

  • 部署示例依赖 Netlify 这一外部托管服务，实际使用需自行注册 Netlify 账号并遵守其服务条款与费用政策，该外部服务不属于 MIT 许可的代码范围。
  • E2E 测试依赖 GitHub Actions 这一外部 CI 服务，运行需使用 GitHub 账号并受其用量与计费规则约束。
  • 克隆方式依赖 npx/degit 从 GitHub 拉取仓库，需要可访问 GitHub 的网络环境与相应账号条件。
  • 演示图片、字体、图标及其他第三方素材需按各自许可核对，不能仅凭代码的 MIT 许可判断。
  • 域名、托管、数据库、支付或 AI 等外部服务可能另外收费。
查看原文依据

Permission is hereby granted, free of charge

许可证原文

Deploy on [Netlify](https://www.netlify.com/), zero-config

README 原文

E2E Testing with [Playwright](https://playwright.dev/) on [GitHub Actions](https://github.com/features/actions)

README 原文

npx degit kingyue737/vitify-next my-vitify-app

README 原文
https://github.com/kingyue737/vitify-next/blob/main/LICENSEhttps://github.com/kingyue737/vitify-next/blob/main/README.md

DeepSeek 根据仓库许可证和 README 整理 ·2026-10-02。结果仅覆盖已读取资料，依赖、图片、字体及后续条款变更以各自原文为准。

项目核对记录与介绍依据

模板资料

来源平台
GitHub
资料与维护参考分
资料较完整 · 92 / 100
技术栈
Vue · Vite
网站类型
后台 · 启动器
这个分数如何计算

本站按许可资料（最高30分）、演示链接（12分）、预览图（10分）、Star数（15分）、记录的维护时间（15分）、描述完整度（8分）、功能记录（5分）和分类资料（5分）计算。它不是代码、安全或性能测试，也不是 Google 评分；有链接不代表已实测可用。

这个项目需要核对什么

记录的仓库更新时间
2026-07-26
截图检查日期
2026-10-02

已收录演示链接。请用你的内容与屏幕尺寸检查；有演示不代表表单、认证或支付已经可用。

目录记录的主要技术栈是 Vue。请通过依赖清单和锁文件核对实际版本与托管要求。这些说明基于收录资料，不代表代码审计或部署实测。

查看具体选型方法 →

介绍的制作与核对状态

介绍由 AI 辅助整理目录与仓库资料。仓库作者不等于这篇介绍的审核者。

已完成服务器许可规则与 AI 来源核对；未经过人工编辑审核。

查看当时使用的来源资料

SHA-256: 000e7be5033e51711f45dc6c5a0e0c9dcf55b1769dc2dddd62f973b5dfb54775

2026-10-02T18:13:32.794Z

来源文件 / 仓库
<p align="center">
  <img alt="Vitify - Opinionated Vuetify Admin Starter Template" src="public/favicon.svg" width=200px/>
</p>
<h1 align="center">Vitify Admin</h1>

<p align="center">
  <a href="https://github.com/vuejs/vue">
    <img src="https://img.shields.io/badge/vue-3-brightgreen.svg" alt="vue">
  </a>
  <a href="https://github.com/vuetifyjs/vuetify">
    <img src="https://img.shields.io/badge/vuetify-4-blue.svg" alt="vuetify">
  </a>
  <a href="https://github.com/kingyue737/vitify-admin/blob/main/LICENSE">
    <img src="https://img.shields.io/github/license/mashape/apistatus.svg" alt="license">
  </a>
</p>

<p align='center'>
<b>Vite</b> + <b>Vuetify</b>, Opinionated Admin Starter Template<br><br>
</p>

<p align='center'>
<a href="https://vitify-next.netlify.app/">Live Demo<br><br></a>
Lightweight Vue 3 version of <a href="https://github.com/kingyue737/vitify-admin">Vitify Admin<br><br></a>
</p>

## Variants

- [vitify-nuxt](https://github.com/kingyue737/vitify-nuxt) - Vuetify 4 with Nuxt 4, the best DX 🔥🔥🔥

- [vitify-electron](https://github.com/kingyue737/vitify-electron) - Vuetify 3 with Electron
- [vitify-admin](https://github.com/kingyue737/vitify-admin) - Vuetify 2 but with full Typescript support and Vite

## Features

- ⚡️ [Vite](https://github.com/vitejs/vite), [pnpm](https://pnpm.io/), [ESBuild](https://github.com/evanw/esbuild) - born with fastness

- 🗂️ [File based routing](./src/pages)

- 📑 [Layout system](./src/layouts)

- 🍍 [State Management via Pinia](https://pinia.vuejs.org/)

- 📥 [APIs auto importing](https://github.com/antfu/unplugin-auto-import) - use Composition API and others directly

- ☁️ Deploy on [Netlify](https://www.netlify.com/), zero-config

- 🧪 Unit/Component Testing with [Vitest](https://github.com/vitest-dev/vitest) + [Testing Library](https://github.com/testing-library/vue-testing-library), E2E Testing with [Playwright](https://playwright.dev/) on [GitHub Actions](https://github.com/features/actions)

<br>

### Admin Starter Template

- 🪟 Default layout with drawer, header and footer

- 🧭 Auto generated navigation drawer and breadcrumbs based on routes

- 🔔 Notification store

- 📉 Data visualization with [vue-echarts](https://github.com/ecomfe/vue-echarts)

- 🎨 Theme color customization and dark mode

- 📱 Responsive layout

## Dropped Features from [Vitify](https://github.com/kingyue737/vitify-admin)

Currently I want to keep this template as light as possible, see [Vitify Admin](https://github.com/kingyue737/vitify-admin) of Vue 2 version for full featureset.

- ~~I18n~~
- ~~Browsers Compability~~
- ~~Mock API~~
- ~~Login Page~~
- ~~axios~~

## Pre-packed

### UI Frameworks

- [Vuetify](https://vuetifyjs.com/) - Material Design Framework

### Plugins

- [Vue Router](https://github.com/vuejs/router)
  - [`vite-plugin-vue-meta-layouts`](https://github.com/dishait/vite-plugin-vue-meta-layouts) - Layouts for pages
- [Pinia](https://pinia.esm.dev) - Intuitive, type safe, light and flexible Store for Vue using the Composition API
- [`unplugin-vue-components`](https://github.com/antfu/unplugin-vue-components) - Auto import Vuetify 2 components
- [`unplugin-auto-import`](https://github.com/antfu/unplugin-auto-import) - Directly use Vue Composition API and others without importing
- [VueUse](https://github.com/antfu/vueuse) - Collection of useful composition APIs
- [`rollup-plugin-regexp`](https://github.com/kingyue737/rollup-plugin-regexp) - auto replace [`@mdi/font`](https://github.com/Templarian/MaterialDesign-Webfont) with [`@mdi/js`](https://github.com/Templarian/MaterialDesign-JS) in `<VIcon>`, reduce bundle size

### Coding Style

- [Prettier](https://prettier.io/), single quotes, no semi
- [ESLint flat config](https://eslint.org/docs/latest/use/configure/configuration-files-new) with adapted [@nuxt/eslint](https://github.com/nuxt/eslint), future-proof

### Dev tools

- [TypeScript](https://www.typescriptlang.org/)
- [Vitest](https://github.com/vitest-dev/vitest) - Unit testing powered by Vite
- [pnpm](https://pnpm.js.org/) - Fast, disk space efficient package manager
- [Netlify](https://www.netlify.com/) - zero-config deployment
- [VS Code Extensions](./.vscode/extensions.json)
  - [Playwright](https://playwright.dev/docs/getting-started-vscode) - E2E testing
  - [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) - TypeScript support inside Vue SFCs
  - [ESLint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint) - Find and fix problems in your code
  - [Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) - Code formatter
  - [EditorConfig for VS Code](https://marketplace.visualstudio.com/items?itemName=EditorConfig.EditorConfig)
  - [Material Design Icons Intellisense](https://marketplace.visualstudio.com/items?itemName=lukas-tr.materialdesignicons-intellisense)

## Try it now!

### GitHub Template

[Create a repo from this template on GitHub](https://github.com/kingyue737/vitify-next/generate).

### Clone to local

If you prefer to do it manually with the cleaner git history

```bash
npx degit kingyue737/vitify-next my-vitify-app
cd my-vitify-app
pnpm i
```
反馈内容错误

看看同类模板

对比同技术栈与用途的模板，找到更适合的视觉与内容结构。

vuestic-admin

vuestic-admin

Vuestic Admin is an open-source, ready-to-use admin template suite designed for rapid development, easy mainte…

Vue · 后台

vitesse

vitesse

🏕 Opinionated Vite + Vue Starter Template

Vue · 启动器

v3-admin-vite

v3-admin-vite

v3-admin-vite 是一个主打 AI 编程友好体验的 Vue3 后台管理模板，基于 Vue3、Vite、TypeScript、Element Plus 构建。

Vue · 后台

vue-typescript-admin-template

vue-typescript-admin-template

vue-typescript-admin-template 是一套面向后台管理界面的前端解决方案，基于 Vue 2.6、TypeScript 和 Element UI 构建。

Vue · 后台

vue-antd-admin

vue-antd-admin

Vue Antd Admin 是 Ant Design Pro 的 Vue 实现版本，目标是为中后台项目提供一套开箱即用的前端与设计解决方案。

Vue · 后台

coreui-free-vue-admin-template

coreui-free-vue-admin-template

Free Vue Admin & Dashboard Template Built for AI-Assisted Development

Vue · 后台