Simple beautiful fast admin template:vue3+elementplus+pinia+echart

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 Github repository

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

Clone Gitee repository

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

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

setting

config.js

---

Rendering Preview

The following is the screenshot of the pro version：

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, ...)