PHPackages                             vueadmin/vue-admin - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Admin Panels](/categories/admin)
4. /
5. vueadmin/vue-admin

ActiveProject[Admin Panels](/categories/admin)

vueadmin/vue-admin
==================

A background manager scaffolding base Vue.js

3516Vue

Since Feb 20Pushed 9y ago4 watchersCompare

[ Source](https://github.com/rootsli/vueadmin)[ Packagist](https://packagist.org/packages/vueadmin/vue-admin)[ RSS](/packages/vueadmin-vue-admin/feed)WikiDiscussions master Synced 2mo ago

READMEChangelogDependenciesVersions (1)Used By (0)

[![](https://github.com/rootsli/vueadmin/raw/master/doc/img/logo.png)](https://github.com/rootsli/vueadmin/blob/master/doc/img/logo.png)

vue-admin - A background manager scaffolding base Vue.js
========================================================

[](#vue-admin---a-background-manager-scaffolding-base-vuejs)

[![Packagist](https://camo.githubusercontent.com/cd8f20702db3c4586281173b5faa2d82b4b38ba047737ce39062bce65b3b0e1e/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f7061636b61676973742d312e312e322d626c75652e737667)](https://packagist.org/packages/vueadmin/vue-admin)[![Vuejs](https://camo.githubusercontent.com/f594a68271afe5d0067e1854951bb8411b7ff5b9c84a72e09cf6ab1d1be3b400/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f253230506f776572656425323062792532302d2532305675656a73253230312e782e782532302d677265656e2e7376673f7374796c653d666c6174)](http://cn.vuejs.org/)

A Vue.js background manager scaffolding base vue.js(1.0.x) + Semantic UI + vuex + vue-router + vue-resource(whatwg-fetch) + vue-validator + vue-loader + webpack

使用Vue.js作为基础框架，Semantic UI作为UI层，实现了一个后台管理系统的基础框架。可以基于此框架实现功能复杂的后台管理系统。

[点此查看运行效果](http://vueadmin.duapp.com)（登录名：admin，密码：admin）

※ 已基于 vue2 + webpack2 + elementUI 实现了一套全新的后台管理框架，具体请移步 \[\] ([https://github.com/rootsli/vue2admin)查看](https://github.com/rootsli/vue2admin)%E6%9F%A5%E7%9C%8B)

主要依赖组件
------

[](#主要依赖组件)

- vue.js ^1.0.21
- semantic-ui-css ^2.2.2 由于semantic-ui经过了定制，因此建议将下文“关于semanticUI css的本地化定制”章节附件semantic-ui-custom.rar直接解压到node\_modules\\semantic-ui-css目录下即可（需先运行npm install）。否则项目跑起来后，界面和截图不一致。
- 百度 echarts3

Build Setup
-----------

[](#build-setup)

```
# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build

# run unit tests
npm run unit

# run e2e tests
npm run e2e

# run all tests
npm test
```

关于semanticUI css的本地化定制
----------------------

[](#关于semanticui-css的本地化定制)

- 本项目虽然使用的是semantic-ui-css，但是由于Semantic UI 默认使用的是谷歌提供的字体，并且是直接使用了谷歌的官方链接。因此建议对css进行本地化定制，使用定制后编译生成的文件替换semantic-ui-css中的文件。 具体定制方法请参考Semantic UI官方文档，主要变更如下：

    - 默认字体改为使用微软雅黑

    [![image](https://github.com/rootsli/vueadmin/raw/master/doc/img/custom1.jpg)](https://github.com/rootsli/vueadmin/blob/master/doc/img/custom1.jpg)

    - 关闭google字体动态链接

    [![image](https://github.com/rootsli/vueadmin/raw/master/doc/img/custom2.jpg)](https://github.com/rootsli/vueadmin/blob/master/doc/img/custom2.jpg)

    - 修改控件样式的默认颜色

    [![image](https://github.com/rootsli/vueadmin/raw/master/doc/img/custom3.jpg)](https://github.com/rootsli/vueadmin/blob/master/doc/img/custom3.jpg)

    - 修改默认背景色

    [![image](https://github.com/rootsli/vueadmin/raw/master/doc/img/custom4.jpg)](https://github.com/rootsli/vueadmin/blob/master/doc/img/custom4.jpg)

    ### 附：[semantic-ui-custom.rar](https://github.com/rootsli/vueadmin/blob/master/doc/semantic-ui-custom.rar)(可通过右键另存为保存)。另，定制文件请见文件[site.variables](https://github.com/rootsli/vueadmin/blob/master/doc/site.variables)

    [](#附semantic-ui-customrar可通过右键另存为保存另定制文件请见文件sitevariables)

    ### 如不想自己定制，也可以直接解压semantic-ui-custom.rar内容覆盖掉node\_modules\\semantic-ui-css目录下内容即可（需先运行npm install）。

    [](#如不想自己定制也可以直接解压semantic-ui-customrar内容覆盖掉node_modulessemantic-ui-css目录下内容即可需先运行npm-install)

菜单右侧主页面布局说明
-----------

[](#菜单右侧主页面布局说明)

- 典型的布局结构（推荐布局）

```
    ...

            标题

    ...
```

- 界面说明 [![image](https://github.com/rootsli/vueadmin/raw/master/doc/img/container-layout.jpg)](https://github.com/rootsli/vueadmin/blob/master/doc/img/container-layout.jpg)

Change Log
----------

[](#change-log)

- 20160820
    - 新增表单示例
- 20160812
    - list示例新增项目的新增，编辑case
- 20160811
    - 更新README.md
- 20160810
    - 新增翻页组件
    - 新增表格示例
- 20160808
    - 菜单支持折叠与隐藏
- 20160805
    - 菜单隐藏使用动画
    - 页面加载支持进度条
- 20161012
- 整合vue-echarts
- 整合百度echarts3
- 实现基本图形示例
- 页面F5刷新时，菜单展开错误问题修复
- 20161014
- 生产打包js文件生成6位数的hash
- 添加运行效果

To Do List
----------

[](#to-do-list)

- 报表实例：地图示例

UI截图
----

[](#ui截图)

- 登录界面 [![image](https://github.com/rootsli/vueadmin/raw/master/doc/img/login.jpg)](https://github.com/rootsli/vueadmin/blob/master/doc/img/login.jpg)
- 表格示例 [![image](https://github.com/rootsli/vueadmin/raw/master/doc/img/main.jpg)](https://github.com/rootsli/vueadmin/blob/master/doc/img/main.jpg)
- 表单 [![image](https://github.com/rootsli/vueadmin/raw/master/doc/img/form.jpg)](https://github.com/rootsli/vueadmin/blob/master/doc/img/form.jpg)
- 基本图形 [![image](https://github.com/rootsli/vueadmin/raw/master/doc/img/basecharts.jpg)](https://github.com/rootsli/vueadmin/blob/master/doc/img/basecharts.jpg)

###  Health Score

23

—

LowBetter than 27% of packages

Maintenance20

Infrequent updates — may be unmaintained

Popularity14

Limited adoption so far

Community12

Small or concentrated contributor base

Maturity41

Maturing project, gaining track record

 Bus Factor1

Top contributor holds 100% of commits — single point of failure

How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window.

**Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores.

**Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement.

**Maturity (30%)** — Project age, version count, PHP version support, and release stability.

### Community

Maintainers

![](https://www.gravatar.com/avatar/801b8f6b46ce3d192d5863329bf12c40de0e165de23b26fdb1e5c5c2b4973322?d=identicon)[rootsli](/maintainers/rootsli)

---

Top Contributors

[![rootsli](https://avatars.githubusercontent.com/u/4099803?v=4)](https://github.com/rootsli "rootsli (9 commits)")

### Embed Badge

![Health badge](/badges/vueadmin-vue-admin/health.svg)

```
[![Health](https://phpackages.com/badges/vueadmin-vue-admin/health.svg)](https://phpackages.com/packages/vueadmin-vue-admin)
```

###  Alternatives

[jeroennoten/laravel-adminlte

Easy AdminLTE integration with Laravel

4.0k4.8M43](/packages/jeroennoten-laravel-adminlte)[dmstr/yii2-adminlte-asset

AdminLTE backend theme asset bundle for Yii 2.0 Framework

1.1k1.8M67](/packages/dmstr-yii2-adminlte-asset)[dwij/laraadmin

LaraAdmin is a Open source Laravel Admin Panel / CMS which can be used as Admin Backend, Data Management Tool or CRM boilerplate for Laravel with features like CRUD Generation, Module Manager, Media, Menus, Backups and much more

1.6k68.7k](/packages/dwij-laraadmin)[filament/spatie-laravel-media-library-plugin

Filament support for `spatie/laravel-medialibrary`.

1764.8M125](/packages/filament-spatie-laravel-media-library-plugin)[bezhansalleh/filament-exceptions

A Simple & Beautiful Pluggable Exception Viewer for FilamentPHP's Admin Panel

193195.9k13](/packages/bezhansalleh-filament-exceptions)[filament/infolists

Easily add beautiful read-only infolists to any Livewire component.

1220.8M36](/packages/filament-infolists)

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)