VueLaravelVite后台

admin-one-vue-tailwind — Vue 后台模板

作者 acemihir

基于 Vue 3 与 Tailwind CSS 的免费后台管理面板模板，支持深色模式、Vite 构建与 Pinia 状态管理，并提供 Nuxt 与 Laravel 集成指南。

打开源站下载源码 ZIP

看看你的网站会是什么样

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

1 个预览视图

桌面端首页

访问演示网站在新标签页打开

桌面端截图首屏预览

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

目前有 1 张原始预览，可打开完整图片查看设计细节。

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

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

值得关注的模板亮点

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

使用 Vue 3 Composition API 与 `<script setup>` 单文件组件

基于 Tailwind CSS 的界面样式，内置深色模式与自定义滚动条

使用 Pinia 进行状态管理，配合 Vue Router 构成单页应用

默认通过 Vite 进行开发热更新、生产构建与本地预览

提供 Nuxt 3 与 Laravel Breeze Inertia + Vue 的集成指南

响应式布局：移动端折叠菜单与表格，桌面端左侧固定侧边栏

模板详细介绍

Admin One 是一个免费的后台管理面板模板，采用 Vue 3 的 Composition API 与 `<script setup>` 单文件组件编写，样式基于 Tailwind CSS，并使用 Pinia 管理状态。项目默认通过 Vite 进行开发与构建，README 中给出了 `npm run dev`、`npm run build`、`npm run preview` 和 `npm run lint` 等命令。

界面方面，模板内置深色模式与自定义滚动条，采用单页应用结构并配合 Vue Router 组织页面。布局随屏幕宽度变化：移动端与平板隐藏侧边菜单、卡片与表格可折叠；约 1024px 的小型笔记本上侧边菜单可显示或隐藏；笔记本与桌面端则使用左侧固定侧边菜单的经典布局。

除默认的 Vite 构建外，仓库还提供 Nuxt 3 集成指南（位于 `.nuxt-guide` 目录）以及 Laravel Breeze Inertia + Vue 集成指南（位于 `.laravel-guide` 目录）。项目以 MIT 许可发布，免费版本仅限社区支持；README 同时提到存在付费的高级版本，本条目仅对应公开的免费代码。

VueLaravelVite后台

适合你的项目吗？

适用场景

需要一个 Vue 3 + Tailwind CSS 后台界面起点，用于搭建管理后台
希望在 Vue 项目中直接使用 Pinia 与 Vue Router 组织后台页面
需要带深色模式的后台面板，并希望样式可通过 Tailwind 调整
计划将后台面板接入 Nuxt 3 应用
计划在 Laravel Breeze Inertia + Vue 项目中复用该后台界面

适合人群

使用 Vue 3 技术栈、需要现成后台布局与组件的开发者
偏好 Tailwind CSS 工具类样式、希望自行调整外观的团队
需要在 Vite、Nuxt 或 Laravel 环境中集成同一套后台界面的项目
接受 MIT 免费版本并自行承担后续维护与定制的使用者

上手与定制指南

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

1
通过 GitHub 模板生成仓库、克隆仓库或下载 zip 获取代码，然后在项目目录执行 `npm install`。
2
开发时运行 `npm run dev`，生产构建使用 `npm run build`，本地预览构建结果使用 `npm run preview`，代码检查使用 `npm run lint`。
3
Nuxt 3 集成参考仓库中的 `.nuxt-guide` 目录，Laravel Breeze Inertia + Vue 集成参考 `.laravel-guide` 目录。
4
免费版本仅提供 GitHub 社区支持，issue 列表仅接受缺陷报告与功能请求，不处理使用问题。
5
演示图片、字体、图标等第三方素材需按各自许可单独核对，代码的 MIT 许可不覆盖这些内容。

查看仓库使用说明

授权与来源资料

使用条件与限制

免费使用 · 保留许可声明

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

使用时需要遵守

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

额外费用与待核对事项

免费版本仅提供 GitHub 社区支持，不提供官方技术支持或使用答疑。
GitHub issue 仅接受缺陷报告与功能请求，不接受使用类提问，此类 issue 会被关闭。
项目另有付费高级版本；免费代码不包含高级版功能，如需高级功能须另行购买。
项目资料提及可选付费版本或功能；本次仅收录公开免费代码，不包含付费升级。
演示图片、字体、图标及其他第三方素材需按各自许可核对，不能仅凭代码的 MIT 许可判断。
域名、托管、数据库、支付或 AI 等外部服务可能另外收费。

查看原文依据

Permission is hereby granted, free of charge
许可证原文

JustBoil's free items are limited to community support on GitHub.
README 原文

The issue list is reserved exclusively for bug reports and feature requests. That means we do not accept usage questions.
README 原文

[Premium version](https://justboil.me/tailwind-admin-templates/vue-dashboard/) available
README 原文

https://github.com/acemihir/admin-one-vue-tailwind/blob/main/LICENSE https://github.com/acemihir/admin-one-vue-tailwind/blob/main/README.md

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

项目核对记录与介绍依据

模板资料

来源平台: GitHub
资料与维护参考分: 资料一般 · 73 / 100
技术栈: Vue · Laravel · Vite
网站类型: 后台

这个分数如何计算

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

这个项目需要核对什么

记录的仓库更新时间: 2022-10-14
截图检查日期: 2026-10-04

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

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

查看具体选型方法 →

介绍的制作与核对状态

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

审核声明: [email protected] · 2026-10-04

查看当时使用的来源资料

SHA-256: 64f9a440735ef68ad30777a59bc779223fc2566e24e4002c4171b970af486bb5

2026-10-04T02:55:59.915Z

来源文件 / 仓库

# [Admin One &mdash; Free Vue 3.x Tailwind 3.x Admin Dashboard with dark mode](https://justboil.me/tailwind-admin-templates/free-vue-dashboard/)

[![version](https://img.shields.io/github/v/release/justboil/admin-one-vue-tailwind)](https://justboil.me/tailwind-admin-templates/free-vue-dashboard/)  [![license](https://img.shields.io/badge/license-MIT-blue.svg)](https://justboil.me/tailwind-admin-templates/free-vue-dashboard/)

### Tailwind 3.x Vue 3.x with Vite or Nuxt or Laravel

[![Free Vue 3 Tailwind 3 admin dashboard with dark mode](https://static.justboil.me/templates/one/repo-tailwind-vue.png)](https://justboil.github.io/admin-one-vue-tailwind/)

[![Vue Tailwind white & dark styles](https://static.justboil.me/templates/one/repo-styles.png)](https://justboil.github.io/admin-one-vue-tailwind/)

### Tailwind 3.x Vue 3.x with Vite or Nuxt or Laravel

**Admin One** is simple, beautiful and free Vue.js 3.x Tailwind CSS 3.x admin dashboard. Nuxt 3.x or Laravel 9.x integrations available

* Built with **Vue.js 3**, **Tailwind CSS 3** framework & **Composition API**
* **Vite** under the hood &mdash; [Info](https://vitejs.dev)
* **Nuxt 3** integration available &mdash; [Info](#nuxt-3-integration)
* **Laravel Breeze Inertia Vue** integration available &mdash; [Info](#laravel-9x-integration)
* **SFC** `<script setup>` &mdash; [Info](https://v3.vuejs.org/api/sfc-script-setup.html)
* **Pinia** state library (official Vuex 5) &mdash; [Info](https://pinia.vuejs.org/)
* **Dark mode**
* **Styled** scrollbars
* SPA with **Router**
* **Production CSS** is only **&thickapprox;38kb**
* Reusable components
* Free under MIT License
* [Premium version](https://justboil.me/tailwind-admin-templates/vue-dashboard/) available

## Table of Contents

* [React TypeScript version](#looking-for-react-typescript-version)
* [Responsive layout](#responsive-layout)
  * [Mobile & tablet](#mobile--tablet)
  * [Small laptops](#small-laptops-1024px)
  * [Laptops & desktops](#laptops--desktops)
* [Demo](#demo)
  * [Free dashboard demo](#free-dashboard-demo)
  * [Premium dashboard demo](#premium-dashboard-demo)
* [Quick Start](#quick-start)
  * [Get code & install](#get-code--install)
  * [Vite builds](#vite-builds)
  * [Linting](#linting)
  * [Nuxt 3.x integration](#nuxt-3x-integration)
  * [Laravel 9.x integration](#laravel-9x-integration)
* [Docs](#docs)
* [Browser Support](#browser-support)
* [Reporting Issues](#reporting-issues)
* [Licensing](#licensing)
* [Useful Links](#useful-links)

## Looking for React TypeScript version?

This is **Tailwind Vue dashboard** version

Looking for **Tailwind React TypeScript**? Check [Admin One - React TypeScript Tailwind dashboard](https://github.com/justboil/admin-one-react-tailwind) version

## Responsive layout

### Mobile & tablet

Mobile layout with hidden aside menu and collapsable cards & tables

[![Free Vue 3 Tailwind CSS 3 admin dashboard](https://static.justboil.me/templates/one/one-tailwind-vue-mobile.png)](https://justboil.github.io/admin-one-vue-tailwind/)

### Small laptops 1024px

Small laptop layout with show/hide aside menu option

[![Free Vue 3 Tailwind CSS 3 admin dashboard](https://static.justboil.me/templates/one/one-tailwind-vue-1024.png)](https://justboil.github.io/admin-one-vue-tailwind/)

[![Free Vue 3 Tailwind CSS 3 admin dashboard](https://static.justboil.me/templates/one/one-tailwind-vue-1024-menu-open.png)](https://justboil.github.io/admin-one-vue-tailwind/)

### Laptops & desktops

Classic layout with aside menus on the left

[![Free Vue 3 Tailwind CSS 3 admin dashboard](https://static.justboil.me/templates/one/one-tailwind-vue-widescreen.png)](https://justboil.github.io/admin-one-vue-tailwind/)

## Demo

### Free Dashboard Demo

https://justboil.github.io/admin-one-vue-tailwind/

### Premium Dashboard Demo

https://tailwind-vue.justboil.me/

## Quick Start

Get code & install. Then `dev` or `build` with [Vite](#vite-builds) or integrate with [Nuxt](#nuxt-3x-integration) or [Laravel](#laravel-9x-integration)

* [Get code & install](#get-code--install)
* [Vite builds](#vite-builds)
* [Linting](#linting)
* [Nuxt 3.x integration](#nuxt-3x-integration)
* [Laravel 9.x integration](#laravel-9x-integration)

### Get code & install

#### Get the repo

* [Create new repo](https://github.com/justboil/admin-one-vue-tailwind/generate) with this template
* &hellip; or clone this repo on GitHub
* &hellip; or [download .zip](https://github.com/justboil/admin-one-vue-tailwind/archive/master.zip) from GitHub

#### Install

`cd` to project's dir and run `npm install`

### Vite builds

[Vite](https://vitejs.dev) is next Generation Frontend Tooling featuring unbundled web-development

#### Hot-reloads for development

```
npm run dev
```

#### Builds and minifies for production

```
npm run build
```

#### Serves recently built app

```
npm run preview
```

### Linting

#### Lint

```
npm run lint
```

### Nuxt 3.x integration

This dashboard can be integrated with Nuxt 3.x. [Check guide](https://github.com/justboil/admin-one-vue-tailwind/tree/master/.nuxt-guide) for more information

### Laravel 9.x integration

This dashboard can be integrated with Laravel 9.x Breeze Inertia + Vue.js stack. [Check guide](https://github.com/justboil/admin-one-vue-tailwind/tree/master/.laravel-guide) for more information

## Docs

Customization & info: https://justboil.github.io/docs/

## Browser Support

We try to make sure Dashboard works well in the latest versions of all major browsers

<img src="https://justboil.me/images/browsers-svg/chrome.svg" width="64" height="64" alt="Chrome"> <img src="https://justboil.me/images/browsers-svg/firefox.svg" width="64" height="64" alt="Firefox"> <img src="https://justboil.me/images/browsers-svg/edge.svg" width="64" height="64" alt="Edge"> <img src="https://justboil.me/images/browsers-svg/safari.svg" width="64" height="64" alt="Safari"> <img src="https://justboil.me/images/browsers-svg/opera.svg" width="64" height="64" alt="Opera">

## Reporting Issues

JustBoil's free items are limited to community support on GitHub.

The issue list is reserved exclusively for bug reports and feature requests. That means we do not accept usage questions. If you open an issue that does not conform to the requirements, it will be closed.

1. Make sure that you are using the latest version of the Dashboard. Issues for outdated versions are irrelevant
2. Provide steps to reproduce
3. Provide an expected behavior
4. Describe what is actually happening
5. Platform, Browser & version as some issues may be browser specific

## Licensing

- Copyright &copy; 2019-2022 JustBoil.me (https://justboil.me)
- Licensed under MIT

## Useful Links

- [JustBoil.me](https://justboil.me/)
- [Tailwind CSS](https://tailwindcss.com/)
- [Vue.js 3](https://v3.vuejs.org/)
- [Vite](https://vitejs.dev)

反馈内容错误