# 轻量级后台管理系统模板

**Repository Path**: chaibk/BackgroundSystem

## Basic Information

- **Project Name**: 轻量级后台管理系统模板
- **Description**: vue-system-admin

轻量级后台管理系统 vue2.0  echarts  wangEditor 

项目原地址(https://gitee.com/ldsice/vue-system-admin)

原作者:豆芽菜(https://gitee.com/ftl_dyc)
- **Primary Language**: HTML
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2022-06-16
- **Last Updated**: 2022-06-16

## Categories & Tags

**Categories**: Uncategorized

**Tags**: Vue, 后台管理系统

## README

# vue-system-admin

### [Element-UI API 地址](https://element.eleme.cn/#/zh-CN)

### [Echarts API 地址](https://echarts.apache.org/zh/index.html)

### [Echarts 交流站](https://madeapie.com/#/)

### [wangEditor 富文本编辑器 API](https://www.wangeditor.com/)

## 说明
> ### 从网上白嫖来的轻量级后台管理系统，可以做权限管理，删除了不必要的页面，只保留了首页；使用时，请单独把这个库下载下来使用，
> ### 不要克隆拉去下来，如果觉得该库有不完善的地方，可以克隆拉下来进行修改在提交。该库只做模板，不设计业务。

## 技术栈

```tex
Vue2.6.11 + ElementUI2.13.2 + vue-router3.4.3 + echarts4.8.0 + v-charts1.19.0 + mavon-editor2.6.17 + wangEditor 5
```

## 功能点

- [x] 登录
- [x] Element-UI
- [x] axios 封装
- [x] API 封装

## 项目结构

```
.
├── public                                      // 公共文件夹
│   ├── favicon.ico                             // 网站头部的图标文件
│   ├── index.html                              // 程序入口HTML文件
├── screen                                      // README.md的图片文件
├── src                                         // 源码文件夹
│   ├── api                                     // API文件
│   ├── assets                                  // 资源文件夹
│   │   └── css                                 // css文件夹
│   │       └── main.css                        // 公共css文件
│   │   └── images                              // images文件夹
│   │       └── login_bg.jpg                    // 登录页面背景图
│   │       └── logo.png                        // logo
│   │   └── theme                               // 自定义主题文件夹
│   │       └── font                            // 主题字体文件夹
│   │       └── index.css                       // 主题css
│   ├── components                              // 自定义组件文件夹
│   │   └── common                              // 公共组件
│   │       └── commonHeader.vue                // 导航栏头部组件
│   │       └── commonSiderbar.vue              // 侧边栏组件
│   │       └── commonTags.vue                  // 标签卡组件
│   │   └── Home.vue                            // 组件合并（中心页）
│   ├── pages                                   // 所有页面文件夹
│   │   └── dashboard                           // 主面板
│   │       └── index.vue
│   │   └── wangeditor                          // 富文本编辑器
│   │       └── index.vue
│   ├── router                                  // 路由
│   │   └── index.js
│   ├── service                                 // 业务处理
│   │   └── axios.js                            // axios封装
│   │   └── bus.js                              // bus总线
│   ├── utils                                   // 工具
│   │   └── httpUtil.js                         // http请求封装
│   ├── App.vue                                 // 页面入口文件
│   ├── main.js                                 // 程序入口文件，配置文件
├── .gitignore                                  // git忽略提交的文件
├── package.json                                // 项目依赖文件管理
├── README.md                                   // README.md
├── babel.config.js                             // babel配置文件
├── vue.config.js                               // 项目配置文件
.
```

## 克隆项目(原地址)

```
git clone https://github.com/FTLLOVE/vue-system-admin.git
```

## 依赖安装

```
yarn install or npm install
```

## 编译启动项目

```
yarn serve or npm run serve
```

## 打包部署

```
yarn build or npm run build
```

## 注意事项

> ### 一、下载本库安装好依赖以后，因为没有接口，所以登录按钮调取的接口方法给跳过了，需要对接登录，请自行联调。
>
> ### 二、使用富文本编辑器，请务必看官方API，如果只要编辑文本，当前富文本足够使用，但如果要添加图片视频等，需要看官方API进行配置，配置流程很简单的。[wangEditor 富文本编辑器API 相关配置地址](https://www.wangeditor.com/v5/menu-config.html#%E4%B8%8A%E4%BC%A0%E5%9B%BE%E7%89%87/)