简体中文 | English

TodoAdmin-vue

Yang Qi rising, all things are born! May beauty come by chance, happiness come as promised, and the epidemic disappear as soon as possible. Let's go to a better future together and live up to all our efforts.

TodoAdmin-Vue:It is an integrated management back-end template solution. The project uses TS script language and is based onVue 3.2+/Vue-cli 5.0+/Vue-router 4.0+、Axios0.2.7+、Element-plus 2.2+、Pinia 2.0+、ECharts 5.3+,The project is composition API style,use remote API & mock dual interface mode to load data.

Demo

• Todoadmin-pro Pro demo
• Todoadmin-base Basic demo

Username：guest

Password：123456

Clone project Click Github repository

# Clone
git clone -b  https://github.com/todoadmin/vue-admin-chart.git
# install
npm i     or     yarn install
# run project
npm run serve     or     yarn serve

Clone project Click Gitee repository

# Clone
git clone -b  https://gitee.com/todoadmin/vue-admin-chart.git
# install
npm i     or     yarn install
# run project
npm run serve     or     yarn serve

The following is a introduction of the pro version

Ecosystem

Project	Status	Description
vue		Progressive JS Framework
vue-router		Single-page application routing
vue-cli		Project scaffolding
axios		Promise network request Library
element-plus		Vue3 component library
element-plus-icons		Vue3 component Icon library
vue-quill		Visual online text editor
quill-image-resize		online text resize image
vue-cropper		vue image cropper
pinia		state management
vue-i18n-next		Multi language
js-md5		MD5 encryption
nprogress		Progress bar loading
echarts		echarts

Install（dependencies）

npm install   or  yarn install

Run dev

npm run serve  or  yarn serve

Build production

npm run build  or  yarn build

ESLint

npm run lint

Config

#config dir
/src/config

#project main import module
/src/config/index.ts

#project run env require module
/src/config/config.ts

#project run env（production/Dev）base config require module
/src/config/module/base.ts

#project run env（production/Dev）CDN config require module
/src/config/module/cdn.ts

#project main global constant import module
/src/config/module/global.ts

#project HTTP/HTTPS Restful request constant import module
/src/config/module/HUrl.ts

Introduction functions

Web

• CDN Distributed js/ css / image / map json data
• Adopted exclusively API remote real-time interface and mock data, and API or mock can be switched freely
• 120+ high quality components page
• The management real-time interface data transmission
• Real time generation of large screen dynamic chart of visual data
• Real-time data websocket interaction
• Composition API models
• JWT authentication
• Real-time monitoring system & server resource usage
• Commercially available free of charge
• PC, mobile, tablet and other multi terminal compatibility
• Dynamic routing menu authentication
• Support MarkDown(md) file to Vue Component page
• Support mock data and remote data
• Support button function permission control
• Support the assignment of roles and permissions of member and administrator
• Support multiple theme switching and adding custom theme styles
• Support multi language text switching
• Support Pinia state management
• Support for custom Vue directives
• Support docking with third-party logistics platforms
• Support binding third-party accounts
• Support log tracing (member and administrator operation)

Restful & Websocket

• Go apis ver（1.7+）
• PHP apis ver （8.0.2 +）/Swoole （4.8+）
• SpringBoot apis ver （2.2+）
• Support multiple open source relational database switching：MySQL、MariaDB、PostgreSQL、openGauss、TiDB
• Supports multiple memory database switching：Redis、Memcached
• Cluster supporting relational database
• Cluster supporting memory database
• Support cloud storage and CDN distribution of static files (images, videos, documents, ...)

Demo & Repository

• Todoadmin-pro Pro demo
• Todoadmin-base Basic demo
• Github repository
• Gitee repository

Username：guest

Password：123456

Reward & contact

• If you agree with the project, you can reward and contact QQ:308407381

Advantages & considerations

Compared with other open source admin management, it has the following advantages:
1. Adopted exclusively remote api real-time interface and mock data, and API or mock can be switched freely
2. Routing menu permission and button permission control
3. Use real-time transmit data
4. Preference data, topic switching, multi language switching ...
5. Native CSS and SCSS automatic sorting and eslint automatic repair
6. Axios secondary packaging supports multiple modes and parameter modes
7. Websocket encapsulation, supporting real-time data transmission
8. Support md5/rsa encryption login
9. Support HTTPS data encryption transmission
10. Use CDN to distribute CSS, JS and image, so speed up
11. Full screen operation
12. Support MarkDown(md) file to Vue Component page

Precautions for use:
1. Project uses Chrome browser , and Vue devtools plug-in debugging
2. Project uses the vscode + eslint verification, vscode editor needs to be configured
3. Project can also be developed using Golan or IntelliJ idea + related plug-ins
4. Project uses the MIT protocol. Please keep the MIT protocol for free commercial use

Rendering Preview

The following is the screenshot of the pro version：

Questions

For questions and support please use the official forum or community chat. The issue list of this repo is exclusively for bug reports and feature requests.

Issues

Please make sure to read the Issue Reporting Checklist before opening an issue. Issues not conforming to the guidelines may be closed immediately.

Browser & mob

Mainstream browsers and IE 10+.

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

Contribution

Thank you to everyone who supports this project！

Acknowledgment

Commercial considerations

This project can be used for commercial purposes free of charge. Please comply with [MIT]（ https://opensource.org/licenses/MIT ）Agreement and retention of the author's technical support statement

Copyright (c) 2022-present, Todoadmin.com