# icafe-cms-demo-frontend

**Repository Path**: itaming/icafe-cms-demo-frontend

## Basic Information

- **Project Name**: icafe-cms-demo-frontend
- **Description**: 网吧行业客户管理系统前端工程
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2022-01-24
- **Last Updated**: 2024-10-31

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

<p align="center">
    <h1 align="center">
        网吧行业客户管理系统
    </h1>
    <p align="center">
        <img src="https://img.shields.io/badge/%40vue%2Fcli-4.5.15-blue">
        <img src="https://img.shields.io/badge/vue.js-3.2.23-brightgreen">
        <img src="https://img.shields.io/badge/element--plus-1.1.0--beta-orange">
        <img src="https://img.shields.io/badge/echarts-5.2.2-yellow">
    </p>
</p>


## 介绍

🎉⭐ 一个基于 Vue 3 + Vue-Router + Vuex + Element-Plus + Echarts + Axios 开发的后台管理系统。

## 意义

本项目是在 Vue3 的学习过程中，为了技术与业务逻辑的结合而开发的项目，也是为了巩固与验证自己的学习。



通过本项目，熟悉了一个项目的从搭建到发布的多个环节，同时也更好的理解了“动态路由”、“公共组件的封装”、“公共代码抽取”等多个方面的很多细节。

## 功能

- 登录 / 注销
  - 账号密码登录
  - token 认证
- Dashboard
  - 统计数据
  - Echarts 图表
- 基于角色的权限管理
  - 自由分配权限
  - 页面权限
  - 功能权限
- 页面布局
  - 第三方字体图标
  - 动态侧边栏（多级路由嵌套）
  - 动态面包屑
  - 侧边栏折叠
  - Echarts 自适应宽度
- 错误页面
  - 404


## 注意

- 因对 element-plus 图标的使用方式以及部分样式的修改，暂不兼容 element-plus v1.2.0 及以后版本。

## 后端

✨⛲ 后端 API 接口基于 Thinkphp 6.0 + MySQL + JWT 开发，项目地址在这里！

https://gitee.com/imutraveler/icafe-api-demo

## 开发

```bash
# 安装依赖
npm install

# 启动
npm run serve
```

## 发布
```bash
# 构建
npm run build
```

## 其他

```bash
# 代码格式检查
npm run lint

# prettier 格式化代码
npm run prettier
```

## 预览

![](./images/01.login.png)



![](./images/02.dashboard.png)



![](./images/03.icafe.png)



![](./images/04.icafe-tech.png)



![](./images/05.category.png)



![](./images/06.user.png)



![](./images/07.isp.png)



![](./images/08.staff.png)



![](./images/09.department.png)



![](./images/10.role.png)



![](./images/11.permission.png)



![](./images/12.menu.png)



![](./images/13.404.png)



![](./images/14.password.png)


## 许可

[MIT](./LICENSE)