VueVitePressVite后台

super-admin — Vue 后台模板

作者 lineo7387

Super Admin 是一个前端优先的 Vue 后台模板,内置可复用 UI 组件、运行时主题、示例模块与可替换的 API 适配器,默认使用模拟数据,不强制依赖后端、数据库或认证服务。

看看你的网站会是什么样

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

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

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

全部页面与视图 2

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

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

值得关注的模板亮点

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

01

前端优先,默认使用模拟数据,无需后端、数据库、认证或 AI 服务商即可运行

02

提供可复用的 UI 原语、运行时主题与独立安装的设计配置包

03

通过 *.manifest.ts 统一声明导航、路由、元数据与权限,模块注册表推导路由、认证与工作区回退

04

数据流保持页面到查询组合式函数、API 适配器再到模拟数据或用户 API 的可读路径

05

内置 create-super-admin 脚手架,支持选择主题、语言环境、图表与是否包含示例模块

06

文档站点提供中英文指南,覆盖 API 适配器替换、主题布局与示例模块移除

模板详细介绍

Super Admin 面向希望先搭建后台控制台前端、而不必在第一天就绑定后端、数据库、认证或 AI 服务商的前端团队。模板默认以模拟数据运行,数据流保持为「页面 -> 模块查询组合式函数 -> API 适配器 -> 模拟数据/用户 API」的可读路径。

项目当前处于 0.x 开发阶段,默认起始版本为 [email protected],各包独立版本管理。源码仓库包含 Vue 后台应用、共享 core/ui/theme 包、可选的 Hono 参考后端、VitePress 文档以及 create-super-admin 脚手架 CLI。使用脚手架生成的项目比源码仓库更小,不包含仓库自身的发布自动化、文档站点、参考后端验证和维护者 AI 工作流文件。

功能模块通过 *.manifest.ts 文件统一声明导航、路由、路由元数据与权限;可选模块在模块本地注册中管理默认入口与兼容重定向,应用模块注册表负责校验组合并推导路由、认证与工作区回退。布局与认证配置使用类型化的应用本地注册表,未知布局或认证配方 ID 会使用显式的中性回退。

模板要求 Node.js ^20.19.0 || >=22.13.0,默认质量基线包含 lint、test、typecheck、build 与 check;使用 --minimal 可生成更小的类型检查/构建基线,但不包含生成的 ESLint、Vitest 或质量测试。默认语言环境为 zh-CN,可通过 --locale 选择 en-US,并配合 --i18n 保留双语目录与语言切换器。--no-examples 可在生成时移除完整的 Examples 注册、页面、适配器、模拟数据、图表与能力上下文。

模板的边界是前端优先与模拟数据驱动,不包含固定 API 响应形状,也不要求 CLI 隐藏服务。当现有页面贴合业务流程时替换 API 适配器即可;当流程不同时,需要同时调整页面、组件、类型、查询与适配器。

VueVitePressVite后台

适合你的项目吗?

适用场景

  • 需要快速搭建后台控制台前端、暂时不接入真实后端或数据库的团队
  • 希望以模拟数据先行开发界面,之后再替换 API 适配器接入自有接口的项目
  • 需要多语言后台界面,并可在生成时选择默认语言或保留双语切换
  • 希望按模块清单组织导航、路由与权限,并保持布局与认证配置可扩展的后台项目
  • 需要参考可替换 API 适配器与主题运行时机制的 Vue 后台示例

适合人群

  • 熟悉 Vue 与 Vite 的前端开发者
  • 需要前端优先后台模板、不急于绑定后端服务的技术团队
  • 希望以模块清单方式扩展导航、路由与权限的后台项目
  • 需要中英文文档与多语言界面基础的后台项目

上手与定制指南

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

  1. 1

    需要 Node.js ^20.19.0 || >=22.13.0

  2. 2

    使用 npm create super-admin@latest my-admin 或 pnpm dlx create-super-admin@latest my-admin --pm pnpm 生成项目

  3. 3

    默认质量基线为 pnpm lint、pnpm test、pnpm typecheck、pnpm build、pnpm check;--minimal 会省略 ESLint、Vitest 与质量测试

  4. 4

    可通过 --theme、--locale、--i18n、--charts、--no-examples 等参数调整生成结果

  5. 5

    生成的项目不包含源码仓库的发布自动化、文档站点、参考后端验证与维护者 AI 工作流文件

查看仓库使用说明

授权与来源资料

使用条件与限制

免费使用 · 保留许可声明

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

使用时需要遵守

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

额外费用与待核对事项

  • 使用该模板需要 Node.js 版本满足 ^20.19.0 或 >=22.13.0,低于此版本的环境无法运行脚手架与开发命令。
  • 选择 --minimal 生成的项目会省略 ESLint、Vitest 与质量测试,仅保留较小的类型检查/构建基线,质量保障能力相应减少。
  • 仓库中的 Hono 参考后端仅用于维护者验证,不属于生成模板的必需部分;用户项目默认不包含该后端。
  • 仓库内的 AI 工作流文件仅供维护者使用,不属于生成模板的契约,使用脚手架生成的项目不包含这些文件。
  • 演示图片、字体、图标及其他第三方素材需按各自许可核对,不能仅凭代码的 MIT 许可判断。
  • 域名、托管、数据库、支付或 AI 等外部服务可能另外收费。
查看原文依据

Permission is hereby granted, free of charge

许可证原文

Requires Node.js `^20.19.0 || >=22.13.0`.

README 原文

Use `--minimal` only when you intentionally want the smaller typecheck/build baseline without generated ESLint, Vitest, or quality tests

README 原文

The optional reference backend validates that the admin app can connect to a real API without making the backend mandatory for users.

README 原文

This repository includes `.trellis/`, `.agents/`, `.agent/`, `.claude/`, `.codex/`, `.mcp.json`, and related AI workflow files for maintainers.

README 原文
https://github.com/lineo7387/super-admin/blob/main/LICENSEhttps://github.com/lineo7387/super-admin/blob/main/README.md

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

项目核对记录与介绍依据

模板资料

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

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

这个项目需要核对什么

记录的仓库更新时间
2026-09-11
截图检查日期
2026-10-01

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

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

查看具体选型方法 →

介绍的制作与核对状态

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

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

查看当时使用的来源资料

SHA-256: e6cd972ffbed0b24920b106449145c07bdeacdb7dd83ff77debda075c0360605

2026-10-01T04:00:09.643Z

来源文件 / 仓库
# Super Admin

Frontend-first Vue admin template with reusable UI primitives, runtime design profiles, example modules, and replaceable API adapters.

[![create-super-admin npm version](https://img.shields.io/npm/v/create-super-admin?label=create-super-admin)](https://www.npmjs.com/package/create-super-admin)
[![core package npm version](https://img.shields.io/npm/v/%40super-admin-org%2Fcore?label=%40super-admin-org%2Fcore)](https://www.npmjs.com/package/@super-admin-org/core)
[![MIT license](https://img.shields.io/github/license/lineo7387/super-admin)](LICENSE)
[![docs](https://img.shields.io/badge/docs-GitHub%20Pages-646CFF)](https://lineo7387.github.io/super-admin/)

Super Admin is designed for teams who want a flexible admin-console foundation without being forced into a backend, database, auth provider, AI provider, or generated API schema on day one.

[Live admin demo](https://lineo7387.github.io/super-admin/demo/) · [中文文档](https://lineo7387.github.io/super-admin/) · [English docs](https://lineo7387.github.io/super-admin/en/)

![Super Admin Cyberpunk dark profile showing the mock-backed Users module](docs/public/super-admin-shell.png)

## Status

This project is under active `0.x` development. The current default starter line is `[email protected]`; packages are independently versioned, with the current matrix documented in the [public presentation guide](docs/guide/public-presentation.md).

Current focus:

- Vue admin app with example modules.
- Shared `core`, `ui`, and `theme` packages.
- Optional Hono reference backend for maintainer validation.
- Documentation for adapter replacement and template boundaries.
- Internationalization foundation with `zh-CN` as the default locale.
- Published `create-super-admin` CLI generation and release validation.

## Use The Starter

Requires Node.js `^20.19.0 || >=22.13.0`.

Create a starter from npm:

```bash
npm create super-admin@latest my-admin
cd my-admin
npm install
npm run dev
```

Prefer pnpm:

```bash
pnpm dlx create-super-admin@latest my-admin --pm pnpm
cd my-admin
pnpm install
pnpm dev
```

Want the optional ECharts example page during non-interactive setup:

```bash
pnpm dlx create-super-admin@latest my-admin --theme base --charts echarts --pm pnpm
```

Want an English-default app without the demonstration modules:

```bash
pnpm dlx create-super-admin@latest my-admin --theme base --locale en-US --no-examples --pm pnpm
```

`--locale` selects `zh-CN` or `en-US` as the default. Combine it with `--i18n` to keep both catalogs and the language switcher. `--no-examples` removes the complete Examples registration, pages, adapters, mock data, charts, and capability context during generation.

This generated project is where you build your own admin app. It stays frontend-first and does not include this repository's release automation, docs site, optional reference backend validation, or maintainer AI workflow files.

The default starter uses the `standard` quality baseline:

```bash
pnpm lint
pnpm test
pnpm typecheck
pnpm build
pnpm check
```

Use `--minimal` only when you intentionally want the smaller typecheck/build baseline without generated ESLint, Vitest, or quality tests:

```bash
pnpm dlx create-super-admin@latest my-admin --theme base --minimal --pm pnpm
```

Every generated project includes `AGENTS.md` and capability-aware files under `ai-context/`. They describe the selected quality mode, the frontend data flow, and the actual manifest/layout/auth registry extension points without requiring an AI provider or maintainer workflow.

Examples is a removable feature slice. The [Examples guide](docs/en/guide/examples.md#remove-examples-completely) lists the exact module, adapter, mock, registration, chart, and AI-context cleanup; router, auth, and workspace fallbacks derive from the remaining app module registrations.
Use `--no-examples` when you want the CLI to apply that complete removal during generation.

## Develop This Repository

Use this path when you want to work on Super Admin itself: the source template, packages, docs, CLI, release scripts, or public repository presentation.

Install dependencies:

```bash
pnpm install
```

Run the admin app:

```bash
pnpm dev
```

Run the documentation site:

```bash
pnpm docs:dev
```

Run workspace checks:

```bash
pnpm lint
pnpm format:check
pnpm typecheck
pnpm test
pnpm build
```

## Preview And Docs

User docs:

- [Live mock-backed admin demo](https://lineo7387.github.io/super-admin/demo/)
- [Hosted docs 中文](https://lineo7387.github.io/super-admin/)
- [Hosted docs English](https://lineo7387.github.io/super-admin/en/)
- [Getting started](docs/guide/getting-started.md)
- [Examples guide](docs/guide/examples.md)
- [API adapters](docs/guide/api-adapters.md)
- [Themes and layouts](docs/guide/themes-layouts.md)

Maintainer docs:

- [Open source workflow](docs/guide/open-source-workflow.md)
- [AI collaboration](docs/guide/ai-collaboration.md)
- [Releasing](docs/guide/releasing.md)
- [Public presentation checklist](docs/guide/public-presentation.md)

The GitHub Pages workflow deploys the VitePress docs and the canonical mock-backed admin under `/demo/`. The demo requires no backend, database, auth provider, or AI provider. Use the credentials shown on its login screen.

## Product Preview

- The committed screenshot above is captured from the real Chromium smoke after switching to the Cyberpunk dark profile, Top header layout, and English locale.
- The [live demo](https://lineo7387.github.io/super-admin/demo/) exposes the same canonical admin app and mock-backed user journey.
- Data remains on the readable `page -> query composable -> API adapter -> mock/user API` path.

## Source Repository Shape

```text
apps/admin/          Vue admin template app
apps/api/            Optional Hono reference API for maintainer validation
packages/core/       Shared frontend contracts and helpers
packages/ui/         Reusable admin UI primitives
packages/theme/      Theme runtime, token application, and chart recipes
packages/theme-*/    Independently installable design profile packages
packages/cli/        Published create-super-admin scaffolder
docs/                VitePress documentation
scripts/             Maintainer validation scripts
```

A project generated with `create-super-admin` is intentionally smaller: it is your runnable admin app, not this full source repository.

## Extension Model

- Feature `*.manifest.ts` files are the single source for navigation, routes, route metadata, and permissions. The Examples tree mounts and composes those manifests instead of copying them.
- Optional modules own their default entry and compatibility redirects in module-local registrations. The app module registry validates composition and derives router, auth, and workspace fallbacks.
- Layouts and auth profile recipes use typed app-local registries. Adding an extension means adding a registration, not editing ID branches across shell consumers.
- Unknown layout or auth recipe IDs use explicit neutral fallbacks rather than silently rendering a branded built-in experience.
- Data-backed pages keep the readable `Page -> module query composable -> API adapter -> mock data / user API` path.

## Core Boundary

The default template is frontend-first and mock-backed. It should run without:

- backend server
- database or ORM
- auth provider
- AI provider
- fixed API response shape
- CLI-only hidden service

When a screen already fits your business workflow, replace the API adapter. When the workflow differs, reshape the page, components, types, queries, and adapter together.

## Documentation

User-facing docs:

- [Getting started](docs/guide/getting-started.md)
- [Project structure](docs/guide/project-structure.md)
- [API adapters](docs/guide/api-adapters.md)
- [Themes and layouts](docs/guide/themes-layouts.md)
- [Examples](docs/guide/examples.md)
- [Optional backend](docs/guide/optional-backend.md)

Maintainer docs:

- [Open source workflow](docs/guide/open-source-workflow.md)
- [AI collaboration](docs/guide/ai-collaboration.md)
- [Releasing](docs/guide/releasing.md)
- [Public presentation](docs/guide/public-presentation.md)

## Maintainer Workflow Files

This repository includes `.trellis/`, `.agents/`, `.agent/`, `.claude/`, `.codex/`, `.mcp.json`, and related AI workflow files for maintainers. They are not part of the generated starter contract and are not required to use `npm create super-admin`.

## Maintainer Validation

The optional reference backend validates that the admin app can connect to a real API without making the backend mandatory for users.

```bash
pnpm validate:starter
pnpm test:reference
```

These smoke tests are maintainer-only and intentionally stay out of the default user path.

## Contributing

Read [CONTRIBUTING.md](CONTRIBUTING.md) before opening a pull request.

## License

MIT. See [LICENSE](LICENSE).
反馈内容错误

看看同类模板

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