vue admin chart

简体中文 | English

TodoAdmin-vue

一阳动、万物生！愿美好不期而遇、愿幸福如约而至、愿疫情早日消散、一起奔赴更好的未来、不辜负你我所有的努力。

TodoAdmin-Vue版：是一个集成管理后台端模板解决方案，项目采用TS脚本语言，基于Vue 3.2+/Vue-cli 5.0+/Vue-router 4.0+、Axios0.2.7+、Element-plus 2.2+、Pinia 2.0+、ECharts 5.3+等搭建，项目是以Composition api风格编写，采用远程API接口和本地Mock双接口模式加载数据。

体验Demo地址

• Todoadmin-pro Pro专业版演示地址（vue3.2+ 支持 PC、平板、手机）
• Todoadmin-base 基本版演示地址（vue3.2+ 支持 PC、平板、手机）

用户名：guest

密码：123456

克隆vue-admin-chart 项目 点击访问Github仓库

# 克隆项目
git clone -b  https://github.com/todoadmin/vue-admin-chart.git
# 安装依赖
npm i     or     yarn install
# 本地开发 启动项目
npm run serve     or     yarn serve

克隆vue-admin-chart 项目 点击访问Gitee仓库

# 克隆项目
git clone -b  https://gitee.com/todoadmin/vue-admin-chart.git
# 安装依赖
npm i     or     yarn install
# 本地开发 启动项目
npm run serve     or     yarn serve

以下为Pro版本的相关介绍

项目生态插件【依赖】列表

标题名称	版本	描述
vue		构建用户界面的渐进式框架
vue-router		单页应用程序路由
vue-cli		项目脚手架
axios		基于promise的网络请求库
element-plus		基于Vue3的组件库
element-plus-icons		基于Vue3的组件图标库
vue-quill		可视化在线文本编辑器
quill-image-resize		文本编辑器图片重置尺寸
vue-cropper		基于Vue3的图片裁剪
pinia		状态管理
vue-i18n-next		多国语言文字切换
js-md5		MD5加密
nprogress		进度条加载
echarts		多功能图表

项目安装（依赖安装）

npm install   or  yarn install

运行开发环境

npm run serve  or  yarn serve

生产环境打包

npm run build  or  yarn build

修复文件

npm run lint

配置文件

#config目录下
/src/config

#项目主体配置import模块
/src/config/index.ts

#项目启动环境配置引入模块
/src/config/config.ts

#项目启动环境（生产环境/Dev环境）基本配置引入模块
/src/config/module/base.ts

#项目启动环境（生产环境/Dev环境）CDN配置引入模块
/src/config/module/cdn.ts

#项目主体全局常量import模块
/src/config/module/global.ts

#项目主体HTTP/HTTPS Restful请求接口地址常量import模块
/src/config/module/HUrl.ts

---

前后端功能简介

前端

• CDN 分布式引入JS/样式/图片/Json/地图数据
• 独家采用API远程实时数据接口和Mock本地数据双接口，可自由切换API或Mock
• 120+高质量组件页面
• 管理后台采用实时接口数据传输
• 实时生成可视化数据大屏动态图表
• 实时数据采用Websocket交互
• 采用Composition API模式
• 采用JWT 认证
• 实时监控系统&服务器资源使用
• 所有开源版本均可免费商用
• 跨平台 PC、手机端、平板等多端兼容
• 动态路由菜单认证和精确到用户的权限路由渲染
• 支持MarkDown(md)文件加载成Vue组件页面
• 支持mock本地模拟数据和远程模拟数据
• 支持按钮功能级别的权限控制
• 支持会员用户和管理员用户的角色、权限等分配
• 支持多种主题切换以及自定义添加主题样式
• 支持多国语言文字切换
• 支持Pinia的状态管理模式
• 支持自定义Vue指令
• 支持对接第三方物流平台
• 支持绑定第三方账号功能
• 支持日志追溯（用户操作和管理员操作）

后端

• 接口语言版本：Go （1.7+）
• 接口语言版本：PHP （8.0.2 +）/Swoole （4.8+）
• 接口语言版本：SpringBoot （2.2+）
• 可支持多种开源关系数据库切换：MySQL、MariaDB、PostgreSQL、openGauss、TiDB
• 可支持多种内存数据库切换：Redis、Memcached
• 可支持关系型数据库的集群
• 可支持内存型数据库的集群
• 可支持静态文件（图片、视频、文档等）云存储和CDN分发

Demo地址&仓库地址

• Todoadmin-pro Pro专业版演示地址（vue3.2+ 支持 PC、平板、手机）
• Todoadmin-base 基本版演示地址（vue3.2+ 支持 PC、平板、手机）
• Github 地址
• Gitee 码云地址

用户名：guest

密码：123456

打赏&联系

• 请喝杯茶呗，打赏后联系 QQ 308407381

优势&注意事项

对比其他开源Admin后台管理框架有如下优势:
1. 独家采用API远程实时数据接口和Mock本地数据双接口调试（可自由切换数据接口模式）
2. 支持前后端路由菜单权限和功能按钮权限控制
3. 采用实时接口传输数据，让你事半功倍
4. 偏好数据、主题切换、多国语言切换等配置
5. 支持原生css和scss 自动排序，eslint 自动修复
6. axios 二次封装，支持多种模式和参数方式
7. websocket 封装，支持实时数据传输方式
8. 支持MD5/RSA加密登录
9. 支持https数据加密传输
10. 使用CDN分发项目样式css和js、图片，让速度飞起来
11. 支持全屏操作
12. 支持MarkDown(md)文件加载成Vue组件页面

使用注意事项:
1. 项目默认使用Chrome浏览器，Vue Devtools 插件调试
2. 项目默认使用VSCode + Eslint校验规范，需要配置vscode编辑器
3. 项目也可以使用Goland或IntelliJ IDEA + 相关插件开发
4. 项目使用MIT开源协议，请保留MIT开源协议即可免费商用

后台效果图预览

以下是截取的是 pro 版的效果图展示：

提问

如果你有任何疑问可以提出，作者会快速处理

问题提交

如果项目存在任何问题或者Bug，可以提交Issue

浏览器&移动端浏览器

主流浏览器和IE 10+.

IE/Edge	Firefox	Chrome	Safari
IE10/IE11/Edge	last 2 versions	last 2 versions	last 2 versions

贡献

多谢每一位支持本项目的人士！

鸣谢

项目（排名不分先后）
vue
element-plus
pinia
vue-i18n-next
axios
echarts
nprogress

商用注意事项

此项目可免费用于商业用途，请遵守 MIT 协议并保留作者技术支持声明。

Copyright (c) 2022-present, Todoadmin.com