Vue 3 + TypeScript + Vite 的前端技术组合
vue-dashboard — Vue 后台模板
作者 MaxAndreev27
基于 Vue 3、TypeScript 与 Vite 的后台管理面板模板,集成 Pinia、Vue Router、Tailwind CSS,并附带 Vitest、Playwright 测试与 Fly.io 部署配置。
看看你的网站会是什么样
浏览真实页面截图,比较内容排版与手机效果。点击下方缩略图切换,放大查看整页细节。
全部页面与视图 2
截图用于了解视觉与布局,交互效果请以实际项目为准。
值得关注的模板亮点
从已有项目资料中,快速了解它的特点。
Pinia 状态管理与 Vue Router 路由
Tailwind CSS 样式方案
支持从 OpenAPI 规范生成 API 客户端
内置 Vitest 单元测试与 Playwright 端到端测试
提供 GitHub Actions 验证工作流与 Fly.io 部署配置
模板详细介绍
这是一个面向内部工具、管理后台与数据分析界面的 Vue 3 起步模板。技术组合为 Vue 3、TypeScript、Vite,状态管理使用 Pinia,路由使用 Vue Router,样式使用 Tailwind CSS。项目按 api、components、pages、router、stores、assets 划分目录,API 层支持从 OpenAPI 规范生成客户端。
工程化方面包含 ESLint、Oxlint、Prettier 代码检查与格式化,Vitest 单元测试、Playwright 端到端测试,以及 GitHub Actions 验证工作流和 Fly.io 部署配置。README 给出的可用脚本覆盖开发、构建、预览、单元测试、端到端测试、lint、format 与 API 客户端重新生成。
使用限制:端到端测试需要先安装 Playwright 浏览器二进制;Fly.io 部署需要配置 FLY_API_TOKEN 密钥。仓库未说明后端接口、鉴权实现细节与数据来源,实际接入需自行补充。第三方素材与外部服务不在 MIT 许可范围内,需单独核对。
适合你的项目吗?
适用场景
- 搭建企业内部管理后台的前端骨架
- 开发数据分析与指标展示类界面
- 作为需要 TypeScript 与单元/端到端测试的 Vue 项目起点
- 需要按 OpenAPI 规范对接后端接口的前端项目
适合人群
- 熟悉 Vue 3 与 TypeScript 的前端开发者
- 需要管理后台或数据看板起步模板的团队
- 希望项目自带 lint、格式化与测试配置的开发者
上手与定制指南
结合仓库当前版本的说明,按下面的资料检查内容、配置与运行要求。
- 1
执行 npm install 安装依赖,npm run dev 启动开发服务器(默认 http://localhost:5173)
- 2
端到端测试前需运行 npx playwright install --with-deps chromium firefox webkit 安装浏览器二进制
- 3
Fly.io 部署需在仓库中配置 FLY_API_TOKEN 密钥
- 4
修改后端接口后可用 npm run gen-api 依据 OpenAPI 规范重新生成 API 客户端
授权与来源资料
使用条件与限制
免费使用 · 保留许可声明本次收录的是公开仓库中的免费 MIT 版本;免费范围为该版本代码,不代表外部服务或第三方素材免费。
使用时需要遵守
- 使用、修改或分发代码时,保留原作者版权声明和完整 MIT 许可证。
- 允许免费使用、修改及商用,也允许分发代码;分发时仍需随附版权与许可声明。
- 代码按现状提供,作者不承诺担保或承担使用责任。
额外费用与待核对事项
- 端到端测试需先安装 Playwright 浏览器二进制(npx playwright install --with-deps chromium firefox webkit),否则无法运行 npm run test:e2e。
- 使用仓库自带的 Fly.io 部署工作流时,必须在 GitHub 仓库中配置 FLY_API_TOKEN 密钥,否则无法完成部署。
- 演示图片、字体、图标及其他第三方素材需按各自许可核对,不能仅凭代码的 MIT 许可判断。
- 域名、托管、数据库、支付或 AI 等外部服务可能另外收费。
查看原文依据
Permission is hereby granted, free of charge
许可证原文
Playwright requires browser binaries to be installed once per environment
README 原文
https://github.com/MaxAndreev27/vue-dashboard/blob/main/LICENSEhttps://github.com/MaxAndreev27/vue-dashboard/blob/main/README.mdRequired secret for deployment: - `FLY_API_TOKEN`
README 原文
依据完整 MIT 许可证与仓库 README 核对 · 2026-09-30。结果仅覆盖已读取资料,依赖、图片、字体及后续条款变更以各自原文为准。
项目核对记录与介绍依据
模板资料
- 来源平台
- GitHub
- 资料与维护参考分
- 资料较完整 · 80 / 100
- 技术栈
- Vue
- 网站类型
- 后台
这个分数如何计算
本站按许可资料(最高30分)、演示链接(12分)、预览图(10分)、Star数(15分)、记录的维护时间(15分)、描述完整度(8分)、功能记录(5分)和分类资料(5分)计算。它不是代码、安全或性能测试,也不是 Google 评分;有链接不代表已实测可用。
这个项目需要核对什么
- 记录的仓库更新时间
- 2026-09-28
- 截图检查日期
- 2026-09-30
已收录演示链接。请用你的内容与屏幕尺寸检查;有演示不代表表单、认证或支付已经可用。
目录记录的主要技术栈是 Vue。请通过依赖清单和锁文件核对实际版本与托管要求。这些说明基于收录资料,不代表代码审计或部署实测。
查看具体选型方法 →介绍的制作与核对状态
介绍由 AI 辅助整理目录与仓库资料。仓库作者不等于这篇介绍的审核者。
已完成服务器许可规则与 AI 来源核对;未经过人工编辑审核。
查看当时使用的来源资料
SHA-256: 342b2db1cd36a3d1aafdd0fd3aa6babad29c577fae9bce49cff7107d5ed38655
2026-09-30T01:12:04.729Z
来源文件 / 仓库# Vue Dashboard A modern Vue 3 dashboard starter for building internal tools, admin panels, and analytics interfaces with a clean developer experience. The project combines Vue 3, TypeScript, Vite, Pinia, and Vue Router with production-focused tooling for linting, testing, and deployment. ## Features - Vue 3 + TypeScript + Vite - Pinia state management - Vue Router-based navigation - Tailwind CSS styling - OpenAPI client generation support - Unit testing with Vitest - End-to-end testing with Playwright - ESLint, Oxlint, and Prettier for code quality - GitHub Actions verification workflow - Fly.io deployment configuration ## Tech Stack - Frontend: Vue 3, Vite, TypeScript - State management: Pinia - Routing: Vue Router - Styling: Tailwind CSS - API layer: generated client from OpenAPI spec - Testing: Vitest, Playwright - CI/CD: GitHub Actions, Fly.io ## Quick Start ```bash npm install npm run dev ``` Then open the app in your browser at: - http://localhost:5173 ## Available Scripts ```bash npm run dev # start Vite dev server npm run build # type-check + production build npm run preview # preview production build locally npm run test:unit # run Vitest unit tests npm run test:e2e # run Playwright end-to-end tests npm run lint # run lint checks npm run format # run Prettier npm run gen-api # regenerate API client from OpenAPI spec ``` ## End-to-End Testing Playwright requires browser binaries to be installed once per environment: ```bash npx playwright install --with-deps chromium firefox webkit ``` Then run: ```bash npm run test:e2e ``` ## Project Structure ```text src/ api/ # generated API client and types components/ # shared UI components pages/ # route-level views router/ # Vue Router configuration stores/ # Pinia stores assets/ # static assets and styles e2e/ # Playwright tests .github/ # GitHub workflows and templates public/ # public static files ``` ## CI/CD This repository includes a GitHub Actions workflow that verifies the app before deployment and deploys it to Fly.io on pushes to the main branch. Required secret for deployment: - `FLY_API_TOKEN` ## Security Please review [SECURITY.md](./SECURITY.md) for vulnerability reporting guidance. ## Contributing We welcome contributions. Please read [CONTRIBUTING.md](./CONTRIBUTING.md) and follow the project code of conduct in [CODE_OF_CONDUCT.md](./CODE_OF_CONDUCT.md). ## License This project is licensed under the [MIT License](./LICENSE). ## Support If you need help, see [SUPPORT.md](./SUPPORT.md).
看看同类模板
对比同技术栈与用途的模板,找到更适合的视觉与内容结构。

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

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

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

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

coreui-free-vue-admin-template
Free Vue Admin & Dashboard Template Built for AI-Assisted Development
Vue · 后台

nova-admin
A simple and flexible admin template based on Vue3, Vite, TypeScript, NaiveUI
Vue · 后台
