Vue后台

tailadmin-vue-template — Vue 后台模板

作者 dynamiatools

把 TailAdmin Vue 后台模板中可复用的部分整理成 npm 包 @dynamia-tools/tailadmin-vue，基于 Vue 3 与 Tailwind CSS 4，按需导入组件，MIT 许可且无 Pro 版本。

打开源站下载源码 ZIP

看看你的网站会是什么样

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

1 个预览视图

目前只有 1 张可用预览，尚未找到可用演示站，暂无法补充内页和手机端截图。

仓库预览 1

查看源码在新标签页打开

作者提供的预览

来自项目仓库的原始界面图片。

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

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

采集于 2026-09-27查看来源

值得关注的模板亮点

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

60 多个组件，涵盖布局、表单、表格、图表、电商组件与个人资料卡片等

按源码路径逐个导入，只引入用到的组件及其传递依赖

Tailwind v4 将颜色编译为 CSS 自定义属性，可在运行时调整品牌色

内置深色模式与 RTL 支持，复用组件已有的 composables

MIT 许可，无 Pro 层级与付费组件，去掉了上游的购买提示

与上游手动同步，变更先审查再合入，版本号采用 CalVer

模板详细介绍

TailAdmin Vue Components 是 TailAdmin Vue 后台模板的可复用组件发行版。原项目以完整演示应用的形式提供，跨项目复用时需要克隆整个应用外壳；这个包把其中可复用的部分抽出来，以普通源码形式发布到 npm，安装后直接按路径导入所需组件，不需要 fork 仓库或在项目间复制粘贴。

包内包含 60 多个组件，覆盖布局（侧边栏、头部、响应式外壳）、表单、表格、图表、电商组件、个人资料卡片等，并附带 composables 与图标。组件按源码路径逐个导入，不会引入未使用的部分；Tailwind v4 把颜色编译为 CSS 自定义属性，因此品牌色可以在运行时通过 style.setProperty 调整。深色模式与 RTL 由组件本身使用的 composables 提供。

项目采用 MIT 许可，与上游一致，并有意去掉了 TailAdmin 的购买提示，没有 Pro 层级。版本号使用 CalVer（YY.MM.MICRO），与上游版本号相互独立；与上游的同步是手动进行的，每次变更都会先经过审查。

Vue后台

适合你的项目吗？

适用场景

在多个 Vue 3 项目中复用同一套后台界面组件，避免重复克隆或复制代码
搭建带侧边栏与头部布局的管理后台页面
使用表格、图表、表单等数据界面组件构建业务页面
需要深色模式或 RTL 布局的后台项目
希望按需引入组件、控制打包体积的前端工程

适合人群

使用 Vue 3.5 及以上版本、并以 Vite 等打包器构建的项目
已使用或准备使用 Tailwind CSS 4 的前端团队
需要后台管理界面组件、且接受手动同步上游更新的开发者
偏好 MIT 许可、不希望受 Pro 层级限制的项目

上手与定制指南

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

1
通过 npm install @dynamia-tools/tailadmin-vue 安装，并在入口文件导入 @dynamia-tools/tailadmin-vue/style.css
2
消费项目需要 Vue ^3.5、Vue Router ^4 或 ^5、Tailwind CSS ^4，并让 Tailwind 扫描 node_modules/@dynamia-tools/tailadmin-vue/src/**/*.vue
3
图表、日历、地图、日期选择器等依赖声明为可选 peerDependencies，按实际使用的组件安装
4
AppSidebar、AppHeader 的 UserMenu/NotificationMenu 等组件按绝对路径引用图片，需将包内 public/images 复制到项目 public 目录
5
ProfileCard、电商组件等引用的其他 /images 路径未随包提供，使用这些组件时需自行提供对应文件或改为自己的图片地址

查看仓库使用说明