# vue-admin-template

**Repository Path**: hsqyz/vue-admin-template

## Basic Information

- **Project Name**: vue-admin-template
- **Description**: 这是一个极简的 vue admin 管理后台。它只包含了 Element UI & axios & iconfont & permission control & lint，这些搭建后台必要的东西
- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: https://panjiachen.gitee.io/vue-admin-template
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 1236
- **Created**: 2023-06-09
- **Last Updated**: 2024-04-16

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# vue-admin-template

英文 | [简体中文](./README-zh.md)

> 一个简约的 Vue 后台管理模板，使用 Element UI、axios、iconfont 和权限控制。

**在线演示地址：** http://panjiachen.github.io/vue-admin-template


**当前版本是基于 `vue-cli` 构建的 `v4.0+` 版本。如果您想使用旧版本，可以切换到 [tag/3.11.0](https://github.com/PanJiaChen/vue-admin-template/tree/tag/3.11.0) 分支，它不依赖于 `vue-cli`。**

## 构建设置

```bash
# 克隆项目
git clone https://github.com/PanJiaChen/vue-admin-template.git

# 进入项目目录
cd vue-admin-template

# 安装依赖
npm install

# 启动开发环境
npm run dev

```

这将自动打开 http://localhost:9528

## 构建

```bash
# build for test environment
# 构建测试环境
npm run build:stage

# 构建生产环境
npm run build:prod
```

## 高级设置

```bash
# preview the release environment effect
# 预览发布环境效果
npm run preview

# 预览发布环境效果 + 静态资源分析
npm run preview -- --report

# 代码格式检查
npm run lint

# 代码格式检查并自动修复
npm run lint -- --fix
```

更多信息请参考[文档](https://panjiachen.github.io/vue-element-admin-site/guide/essentials/deploy.html)。

## 扩展

如果您需要路由权限和根据用户角色生成菜单，可以使用 [permission-control](https://github.com/PanJiaChen/vue-admin-template/tree/permission-control) 分支。

## 相关项目

- [vue-element-admin](https://github.com/PanJiaChen/vue-element-admin)

- [electron-vue-admin](https://github.com/PanJiaChen/electron-vue-admin)

- [vue-typescript-admin-template](https://github.com/Armour/vue-typescript-admin-template)

- [awesome-project](https://github.com/PanJiaChen/vue-element-admin/issues/2312)

## 浏览器支持

现代浏览器和 Internet Explorer 10+。

## 效果

#### Dashboard

![](./images/dashboard.jpg)

#### 表格

![](./images/table.jpg)

#### 测试

![](./images/test.jpg)

#### 照片

![](./images/photo.jpg)