VueHTML后台

coreui-free-vue-admin-template — Vue 后台模板

作者 coreui

CoreUI 官方免费 Vue 后台模板，基于 Vue 3 与 CoreUI 组件库，提供侧边栏导航、仪表盘与常见后台页面结构，采用 MIT 许可。

打开源站下载源码 ZIP

看看你的网站会是什么样

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

3 个预览视图

桌面端首页1 / 3

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

桌面端截图首屏预览

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

全部页面与视图 3

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

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

值得关注的模板亮点

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

CoreUI 官方维护的免费 Vue 后台模板，MIT 许可

基于 Vue 3 与 CoreUI 组件库，使用 Vue Router 与 Pinia

内置侧边栏导航配置、布局容器与仪表盘等视图页面

提供 .cursorrules、ARCHITECTURE.md、DEVELOPMENT.md 等 AI 辅助开发文档

使用 Vite 作为开发与构建工具，默认开发端口为 3000

模板详细介绍

这是 CoreUI 官方发布的免费 Vue 后台管理模板，仓库位于 GitHub，采用 MIT 许可。模板基于 Vue 3 与 CoreUI 组件库构建，属于单页应用，使用 Vue Router 管理路由、Pinia 管理状态、Vite 作为构建工具。

模板包含侧边栏导航配置、布局容器、视图页面、SCSS 样式与示例状态存储，并提供仪表盘等后台常见页面结构。项目附带面向 AI 编程助手的配置文件与架构、开发文档，方便在 Cursor、GitHub Copilot 等工具中按既有约定继续开发。

免费范围限于该仓库中的代码。演示图片、字体、图标等第三方素材需按各自许可核对；数据网格、调度器等为单独收费的附加组件，不属于本免费模板。

VueHTML后台

适合你的项目吗？

适用场景

搭建后台管理系统的前端界面骨架
在 Vue 3 项目中复用 CoreUI 的布局与导航结构
作为 AI 编程助手参与开发的后台项目起点
快速生成仪表盘与数据展示类页面原型

适合人群

需要 Vue 后台模板并接受 CoreUI 组件体系的开发者
希望借助 AI 编程助手按项目约定扩展页面的团队
寻找 MIT 许可免费后台模板用于内部或商业项目的用户

上手与定制指南

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

1
通过 git clone 或下载 release 获取代码，然后执行 npm install 或 yarn install 安装依赖
2
运行 npm run dev 或 yarn dev 启动开发服务器，默认地址为 http://localhost:3000
3
运行 npm run build 或 yarn build 生成生产构建，产物输出到 dist/ 目录
4
数据网格与调度器为单独收费的附加组件，需另行安装并获取许可
5
演示图片、字体、图标等第三方素材需按各自许可单独核对

查看仓库使用说明

授权与来源资料

使用条件与限制

免费使用 · 保留许可声明

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

使用时需要遵守

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

额外费用与待核对事项

数据网格为单独收费的附加组件，需另行安装 @coreui/vue-data-grid 并获取许可，不属于免费模板范围。
调度器为单独收费的附加组件，需另行安装 @coreui/vue-scheduler 并获取许可，不属于免费模板范围。
数据网格与调度器均为独立收费附加组件，需单独购买许可，不包含在免费模板中。
CoreUI PRO 为付费产品，免费范围仅限本仓库代码；PRO 组件（如 Autocomplete、Date Picker、Smart Table 等）需付费获取。
模板基于 CoreUI 与 CoreUI PRO 组件库构建，其中标注 PRO 的组件需付费许可，免费模板不包含这些 PRO 组件。
演示图片、字体、图标及其他第三方素材需按各自许可核对，不能仅凭代码的 MIT 许可判断。
域名、托管、数据库、支付或 AI 等外部服务可能另外收费。

查看原文依据

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

CoreUI Vue Data Grid handles 100,000+ rows with sorting, filtering, virtualization, column pinning, inline editing and CSV export
README 原文

CoreUI Vue Scheduler ships six views — day, week, month, agenda, resources, and timeline
README 原文

One license also covers JavaScript, React and Angular. It's a separate add-on, not part of CoreUI PRO.
README 原文

You can support development by buying the [CoreUI PRO](https://coreui.io/pricing/?framework=vue&src=github-coreui-free-vue-admin-template)
README 原文

CoreUI Vue.js Admin Templates are built on top of CoreUI and CoreUI PRO UI components libraries, including all of these components.
README 原文

https://github.com/coreui/coreui-free-vue-admin-template/blob/main/LICENSE https://github.com/coreui/coreui-free-vue-admin-template/blob/main/README.md

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

项目核对记录与介绍依据

模板资料

来源平台: GitHub
资料与维护参考分: 资料较完整 · 100 / 100
技术栈: Vue · HTML
网站类型: 后台

这个分数如何计算

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

这个项目需要核对什么

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

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

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

查看具体选型方法 →

介绍的制作与核对状态

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

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

查看当时使用的来源资料

SHA-256: b2993bc0b6641bee42976ea60e252761164b37aefe2eb30cc38c3417196bd162

2026-10-01T00:14:43.568Z

来源文件 / 仓库

# CoreUI Free Vue Admin Template - Built for AI-Assisted Development [![Tweet](https://img.shields.io/twitter/url/http/shields.io.svg?style=social&logo=twitter)](https://twitter.com/intent/tweet?text=CoreUI%20-%20Free%Vue%204%20Admin%20Template%20&url=https://coreui.io&hashtags=bootstrap,admin,template,dashboard,panel,free,angular,react,vue)

[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg?style=flat-square)](https://opensource.org/licenses/MIT)
[![@coreui coreui](https://img.shields.io/badge/@coreui%20-coreui-lightgrey.svg?style=flat-square)](https://github.com/coreui/coreui)
[![npm package][npm-coreui-badge]][npm-coreui]
[![NPM downloads][npm-coreui-download]][npm-coreui]
[![@coreui vue](https://img.shields.io/badge/@coreui%20-vue-lightgrey.svg?style=flat-square)](https://github.com/coreui/vue)
[![npm package][npm-coreui-vue-badge]][npm-coreui-vue]
[![NPM downloads][npm-coreui-vue-download]][npm-coreui-vue]  

[npm-coreui]: https://www.npmjs.com/package/@coreui/coreui
[npm-coreui-badge]: https://img.shields.io/npm/v/@coreui/coreui.png?style=flat-square
[npm-coreui-download]: https://img.shields.io/npm/dm/@coreui/coreui.svg?style=flat-square
[npm-coreui-vue]: https://www.npmjs.com/package/@coreui/vue
[npm-coreui-vue-badge]: https://img.shields.io/npm/v/@coreui/vue.png?style=flat-square
[npm-coreui-vue-download]: https://img.shields.io/npm/dm/@coreui/vue.svg?style=flat-square
[npm]: https://www.npmjs.com/package/@coreui/vue

[![Bootstrap Admin Template](https://assets.coreui.io/products/coreui-free-bootstrap-admin-template-light-dark.webp)](https://coreui.io/product/free-react-admin-template/)

CoreUI is meant to be the UX game changer. Pure & transparent code is devoid of redundant components, so the app is light enough to offer ultimate user experience. This means mobile devices also, where the navigation is just as easy and intuitive as on a desktop or laptop. The CoreUI Layout API lets you customize your project for almost any device – be it Mobile, Web or WebApp – CoreUI covers them all!

## Table of Contents

* [Versions](#versions)
* [CoreUI PRO](#coreui-pro)
* [CoreUI PRO Vue Admin Templates](#coreui-pro-vue-admin-templates)
* [Data Grid](#data-grid)
* [Scheduler](#scheduler)
* [Quick Start](#quick-start)
* [Installation](#installation)
* [Basic usage](#basic-usage)
* [What's included](#whats-included)
* [AI-Friendly Development](#ai-friendly-development)
* [Documentation](#documentation)
* [Components](#components)
* [Versioning](#versioning)
* [Creators](#creators)
* [Community](#community)
* [Support CoreUI Development](#support-coreui-development)
* [Copyright and License](#copyright-and-license)

## Versions

* [CoreUI Free Bootstrap Admin Template](https://github.com/coreui/coreui-free-bootstrap-admin-template)
* [CoreUI Free Angular Admin Template](https://github.com/coreui/coreui-free-angular-admin-template)
* [CoreUI Free React.js Admin Template](https://github.com/coreui/coreui-free-react-admin-template)
* [CoreUI Free Vue.js Admin Template](https://github.com/coreui/coreui-free-vue-admin-template)

## CoreUI PRO

* 💪  [CoreUI PRO Angular Admin Template](https://coreui.io/product/angular-dashboard-template/)
* 💪  [CoreUI PRO Bootstrap Admin Template](https://coreui.io/product/bootstrap-dashboard-template/)
* 💪  [CoreUI PRO Next.js Admin Template](https://coreui.io/product/next-js-dashboard-template/)
* 💪  [CoreUI PRO React Admin Template](https://coreui.io/product/react-dashboard-template/)
* 💪  [CoreUI PRO Vue Admin Template](https://coreui.io/product/vue-dashboard-template/)

## CoreUI PRO Vue Admin Templates

| Default Theme | Light Theme |
| --- | --- |
| [![CoreUI PRO Vue Admin Template](https://coreui.io/images/templates/coreui_pro_default_light_dark.webp)](https://coreui.io/product/vue-dashboard-template/?theme=default) | [![CoreUI PRO Vue Admin Template](https://coreui.io/images/templates/coreui_pro_light_light_dark.webp)](https://coreui.io/product/vue-dashboard-template/?theme=light)|

| Modern Theme | Bright Theme |
| --- | --- |
| [![CoreUI PRO Vue Admin Template](https://coreui.io/images/templates/coreui_pro_default_v3_light_dark.webp)](https://coreui.io/product/vue-dashboard-template/?theme=modern) | [![CoreUI PRO Vue Admin Template](https://coreui.io/images/templates/coreui_pro_light_v3_light_dark.webp)](https://coreui.io/product/vue-dashboard-template/?theme=bright)|

## Data Grid

CoreUI Vue Data Grid handles 100,000+ rows with sorting, filtering, virtualization, column pinning, inline editing and CSV export — using the same markup and stylesheet this template already uses.

```bash
npm install @coreui/vue-data-grid
```

One license also covers JavaScript, React and Angular. It's a separate add-on, not part of CoreUI PRO.

- [Vue Data Grid](https://coreui.io/data-grid/vue/?src=readme-free-vue)
- [Documentation](https://coreui.io/data-grid/vue/docs/getting-started/introduction/?src=readme-free-vue)

## Scheduler

CoreUI Vue Scheduler ships six views — day, week, month, agenda, resources, and timeline — with drag & drop, RFC 5545 recurrence, and DST-safe time handling, using the same markup and stylesheet this template already uses.

```bash
npm install @coreui/vue-scheduler
```

One license also covers JavaScript, React and Angular. It's a separate add-on, not part of CoreUI PRO.

- [Vue Scheduler](https://coreui.io/scheduler/vue/?src=readme-free-vue)
- [Documentation](https://coreui.io/scheduler/vue/docs/getting-started/introduction/?src=readme-free-vue)

## Quick Start

- [Download the latest release](https://github.com/coreui/coreui-free-vue-admin-template/archive/refs/heads/main.zip)
- Clone the repo: `git clone https://github.com/coreui/coreui-free-vue-admin-template.git`

### Instalation

``` bash
$ npm install
```

or

``` bash
$ yarn install
```

### Basic usage

``` bash
# dev server with hot reload at http://localhost:3000
$ npm run dev
```

or 

``` bash
# dev server with hot reload at http://localhost:3000
$ yarn dev
```

Navigate to [http://localhost:3000](http://localhost:3000). The app will automatically reload if you change any of the source files.

#### Build

Run `build` to build the project. The build artifacts will be stored in the `dist/` directory.

```bash
# build for production with minification
$ npm run build
```

or

```bash
# build for production with minification
$ yarn build
```

## What's included

Within the download you'll find the following directories and files, logically grouping common assets and providing both compiled and minified variations. You'll see something like this:

```
coreui-free-vue-admin-template
├── public/          # static files
├── src/             # project root
│   ├── assets/      # images, icons, etc.
│   ├── components/  # common components - header, footer, sidebar, etc.
│   ├── layouts/     # layout containers
│   ├── scss/        # scss styles
│   ├── router       # routes config
│   ├── stores/      # template state example 
│   ├── views/       # application views
│   ├── _nav.js      # sidebar navigation config
│   ├── App.vue
│   ├── ...
│   └── main.js
├── index.html   # html template
├── package.json
└── vite.config.mjs
```

## AI-Friendly Development

This template is designed to work seamlessly with AI coding assistants like Cursor, GitHub Copilot, and Claude Code. We've included comprehensive documentation and configuration files to help AI understand the project structure and conventions.

### Features for AI Development

- **`.cursorrules`**: Complete AI assistant configuration with project conventions, technology stack, and coding patterns
- **`ARCHITECTURE.md`**: Detailed technical architecture documentation covering components, routing, state management, and build system
- **`DEVELOPMENT.md`**: Comprehensive development guide with setup instructions, workflows, and best practices
- **JSDoc Comments**: Main Vue components include documentation for better AI understanding

### Getting Started with AI Assistants

1. **Open the project** in your AI-powered IDE (VS Code with Cursor, GitHub Copilot, or Claude Code)
2. **Review `.cursorrules`** to understand the project conventions
3. **Ask your AI assistant** to help you build features - it will automatically follow the project patterns
4. **Use natural language** to describe components, pages, or features you want to add

### What AI Assistants Know About This Project

Your AI assistant understands:
- **Component Library**: Always use CoreUI Vue components (never Tailwind, Vuetify, or other libraries)
- **Code Style**: Vue 3 Composition API with `<script setup>` syntax, Prettier formatting, ESLint rules
- **Architecture**: Single Page Application with Vue Router, Pinia for state management, Vite for building
- **File Organization**: Where to create components, views, routes, and styles
- **Common Patterns**: Lazy loading, composables, navigation configuration, theming

### Example AI Prompts

Try asking your AI assistant:
- "Create a new products page with a table showing product name, price, and status"
- "Add a user profile form with validation"
- "Create a chart showing monthly sales data"
- "Add a new navigation item for the settings page"

For more information, see the [DEVELOPMENT.md](DEVELOPMENT.md) guide.

## Documentation

The documentation for the CoreUI Admin Template is hosted at our website [CoreUI for Vue](https://coreui.io/vue/docs/templates/installation.html)

## Components

CoreUI Vue.js Admin Templates are built on top of CoreUI and CoreUI PRO UI components libraries, including all of these components.

- [Vue Accordion](https://coreui.io/vue/docs/components/accordion.html)
- [Vue Alert](https://coreui.io/vue/docs/components/alert.html)
- [Vue Autocomplete](https://coreui.io/vue/docs/forms/autocomplete.html) **PRO**
- [Vue Avatar](https://coreui.io/vue/docs/components/avatar.html)
- [Vue Badge](https://coreui.io/vue/docs/components/badge.html)
- [Vue Breadcrumb](https://coreui.io/vue/docs/components/breadcrumb.html)
- [Vue Button](https://coreui.io/vue/docs/components/button.html)
- [Vue Button Group](https://coreui.io/vue/docs/components/button-group.html)
- [Vue Callout](https://coreui.io/vue/docs/components/callout.html)
- [Vue Card](https://coreui.io/vue/docs/components/card.html)
- [Vue Carousel](https://coreui.io/vue/docs/components/carousel.html)
- [Vue Checkbox](https://coreui.io/vue/docs/forms/checkbox.html)
- [Vue Chip](https://coreui.io/vue/docs/components/chip.html)
- [Vue Chip Input](https://coreui.io/vue/docs/forms/chip-input.html)
- [Vue Close Button](https://coreui.io/vue/docs/components/close-button.html)
- [Vue Collapse](https://coreui.io/vue/docs/components/collapse.html)
- [Vue Date Picker](https://coreui.io/vue/docs/forms/date-picker.html) **PRO**
- [Vue Date Range Picker](https://coreui.io/vue/docs/forms/date-range-picker.html) **PRO**
- [Vue Dropdown](https://coreui.io/vue/docs/components/dropdown.html)
- [Vue Floating Labels](https://coreui.io/vue/docs/forms/floating-labels.html)
- [Vue Footer](https://coreui.io/vue/docs/components/footer.html)
- [Vue Header](https://coreui.io/vue/docs/components/header.html)
- [Vue Image](https://coreui.io/vue/docs/components/image.html)
- [Vue Input](https://coreui.io/vue/docs/forms/input.html)
- [Vue Input Group](https://coreui.io/vue/docs/forms/input-group.html)
- [Vue List Group](https://coreui.io/vue/docs/components/list-group.html)
- [Vue Loading Button](https://coreui.io/vue/docs/components/loading-button.html) **PRO**
- [Vue Modal](https://coreui.io/vue/docs/components/modal.html)
- [Vue Multi Select](https://coreui.io/vue/docs/forms/multi-select.html) **PRO**
- [Vue Navs & Tabs](https://coreui.io/vue/docs/components/navs-tabs.html)
- [Vue Navbar](https://coreui.io/vue/docs/components/navbar.html)
- [Vue Offcanvas](https://coreui.io/vue/docs/components/offcanvas.html)
- [Vue Pagination](https://coreui.io/vue/docs/components/pagination.html)
- [Vue Password Input](https://coreui.io/vue/docs/forms/password-input.html) **PRO**
- [Vue Placeholder](https://coreui.io/vue/docs/components/placeholder.html)
- [Vue Popover](https://coreui.io/vue/docs/components/popover.html)
- [Vue Progress](https://coreui.io/vue/docs/components/progress.html)
- [Vue Radio](https://coreui.io/vue/docs/forms/radio.html)
- [Vue Range](https://coreui.io/vue/docs/forms/range.html)
- [Vue Range Slider](https://coreui.io/vue/docs/forms/range-slider.html) **PRO**
- [Vue Rating](https://coreui.io/vue/docs/forms/rating.html) **PRO**
- [Vue Select](https://coreui.io/vue/docs/forms/select.html)
- [Vue Sidebar](https://coreui.io/vue/docs/components/sidebar.html)
- [Vue Smart Pagination](https://coreui.io/vue/docs/components/smart-pagination.html) **PRO**
- [Vue Smart Table](https://coreui.io/vue/docs/components/smart-table.html) **PRO**
- [Vue Spinner](https://coreui.io/vue/docs/components/spinner.html)
- [Vue Stepper](https://coreui.io/vue/docs/forms/stepper.html) **PRO**
- [Vue Switch](https://coreui.io/vue/docs/forms/switch.html)
- [Vue Table](https://coreui.io/vue/docs/components/table.html)
- [Vue Textarea](https://coreui.io/vue/docs/forms/textarea.html)
- [Vue Time Picker](https://coreui.io/vue/docs/forms/time-picker.html) **PRO**
- [Vue Toast](https://coreui.io/vue/docs/components/toast.html)
- [Vue Tooltip](https://coreui.io/vue/docs/components/tooltip.html)

## Versioning

For transparency into our release cycle and in striving to maintain backward compatibility, CoreUI Free Admin Template is maintained under [the Semantic Versioning guidelines](http://semver.org/).

See [the Releases section of our project](https://github.com/coreui/coreui-free-vue-admin-template/releases) for changelogs for each release version.

## Creators

**Łukasz Holeczek**

* <https://twitter.com/lukaszholeczek>
* <https://github.com/mrholek>

**Andrzej Kopański**

* <https://github.com/xidedix>

**CoreUI Team**

* <https://twitter.com/core_ui>
* <https://github.com/coreui>
* <https://github.com/orgs/coreui/people>

## Community

Get updates on CoreUI's development and chat with the project maintainers and community members.

- Follow [@core_ui on Twitter](https://twitter.com/core_ui).
- Read and subscribe to [CoreUI Blog](https://coreui.io/blog/).

## Support CoreUI Development

CoreUI is an MIT-licensed open source project and is completely free to use. However, the amount of effort needed to maintain and develop new features for the project is not sustainable without proper financial backing. You can support development by buying the [CoreUI PRO](https://coreui.io/pricing/?framework=vue&src=github-coreui-free-vue-admin-template) or by becoming a sponsor via [Open Collective](https://opencollective.com/coreui/).

## Copyright and License

copyright 2026 creativeLabs Łukasz Holeczek.   

Code released under [the MIT license](https://github.com/coreui/coreui-free-react-admin-template/blob/main/LICENSE).

反馈内容错误