vue admin chart

Simplified Chinese | English

TodoAdmin-vue

When Yang moves, all things come into being! May good things happen unexpectedly, may happiness come as promised, may the epidemic dissipate soon, may we rush to a better future together, and may we live up to all our efforts.

TodoAdmin-Vue version: It is an integrated management backend template solution. The project uses TS script language and is based on Vue 3.2+/Vue-cli 5.0+/Vue-router 4.0+, Axios0.2.7+, Element-plus 2.2+, Pinia 2.0+, ECharts 5.3+, etc., the project is based on Composition It is written in api style and uses remote API interface and local Mock dual interface mode to load data.

Experience Demo address

• Todoadmin-pro Pro professional version demo address (vue3.2+ supports PC, tablet and mobile phone)
• Todoadmin-base basic version demo address (vue3.2+ supports PC, tablet, and mobile phone)

Username: guest

Password: 123456

Clone the vue-admin-chart project and click to access the Github repository

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

Clone the vue-admin-chart project and click to access the Gitee repository

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

The following is an introduction to the Pro version

Project ecological plug-in [dependency] list

title name	Version	describe
vue		A progressive framework for building user interfaces
vue-router		Single page application routing
vue-cli		Project scaffolding
axios		Promise-based network request library
element-plus		Component library based on Vue3
element-plus-icons		Component icon library based on Vue3
vue-quill		Visual online text editor
quill-image-resize		Text editor image resize
vue-cropper		Image cropping based on Vue3
pinia		Status management
vue-i18n-next		Switching between multiple languages ​​and texts
js-md5		MD5 encryption
progress		Progress bar loading
echarts		Multifunctional charts

Project installation (depends on installation)

 npm install   or  yarn install

Run development environment

 npm run serve  or  yarn serve

Production environment packaging

 npm run build  or  yarn build

repair file

 npm run lint

Configuration file

 #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

---

Introduction to front-end and back-end functions

front end

• CDN distributed introduction of JS/style/image/Json/map data
• Exclusively adopts API remote real-time data interface and Mock local data dual interface, and can freely switch API or Mock
• 120+ high quality component pages
• The management background uses real-time interface data transmission
• Generate large-screen dynamic charts of visual data in real time
• Real-time data uses Websocket interaction
• Adopt Composition API pattern
• Use JWT authentication
• Real-time monitoring system & server resource usage
• All open source versions are free for commercial use
• Cross-platform PC, mobile phone, tablet and other multi-terminal compatible
• Dynamic routing menu authentication and routing rendering accurate to the user's permissions
• Supports loading MarkDown (md) files into Vue component pages
• Support mock local simulation data and remote simulation data
• Support button function level permission control
• Supports the assignment of roles, permissions, etc. to member users and administrator users
• Supports multiple theme switching and customized theme styles
• Support multi-language text switching
• Support Pinia’s state management mode
• Support custom Vue instructions
• Support docking with third-party logistics platforms
• Support binding third-party account function
• Support log tracing (user operations and administrator operations)

rear end

• Interface language version: Go (1.7+)
• Interface language version: PHP (8.0.2+)/Swoole (4.8+)
• Interface language version: SpringBoot (2.2+)
• Can support multiple open source relational database switching: MySQL, MariaDB, PostgreSQL, openGauss, TiDB
• Can support multiple memory database switching: Redis, Memcached
• Clusters that can support relational databases
• Clusters that can support in-memory databases
• Can support cloud storage and CDN distribution of static files (pictures, videos, documents, etc.)

Demo address & warehouse address

• Todoadmin-pro Pro professional version demo address (vue3.2+ supports PC, tablet and mobile phone)
• Todoadmin-base basic version demo address (vue3.2+ supports PC, tablet, and mobile phone)
• Github address
• Gitee code cloud address

Username: guest

Password: 123456

Tip&Contact

• Please have a cup of tea and contact QQ 308407381 after tipping

Advantages & Notes

对比其他开源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开源协议即可免费商用

Preview of background renderings

The following is an screenshot of the pro version of the renderings:

Ask a question

If you have any questions, you can ask them and the author will deal with them quickly

Issue submission

If there are any problems or bugs in the project, you can submit an Issue

Browser & mobile browser

Major browsers and IE 10+.

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

contribute

Thank you to everyone who supports this project!

Acknowledgments

Projects (in no particular order)
vue
element-plus
pinia
vue-i18n-next
axios
echarts
progress

Commercial precautions

This project is free for commercial use, please comply with the MIT license and retain the author's technical support statement.

Copyright (c) 2022-present, Todoadmin.com