Simple beautiful fast admin template:vue3+elementplus+pinia+echart
Tags: vue, vueadmin, adminlte3, admintemplate
Published: 2022-06-21 10:21:58


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


![todoadmin dashboard vue3 pinia element-plus mock echarts](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/txq74vuijxw7daqhe8jp.gif)
![todoadmin dashboard vue3 pinia element-plus mock echarts](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r9bqa3hgpo8j96pc2gfc.gif)


## Demo

- [Todoadmin-pro Pro demo](https://pro.todoadmin.com)
- [Todoadmin-base Basic demo](https://base.todoadmin.com)

**Username：guest**
**Password：123456**


## [Clone Github repository](https://github.com/todoadmin/vue-admin-chart)

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


## [Clone Gitee repository](https://gitee.com/todoadmin/vue-admin-chart)

```bash
# 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]                | [![vue-ico]][vue]                               | Progressive JS Framework                             |
| [vue-router]          | [![vue-router-ico]][vue-router]                   | Single-page application routing                         |
| [vue-cli]             | [![vue-cli-ico]][vue-cli]                         | Project scaffolding                                    |
| [axios]          | [![axios-ico]][axios]                   | Promise network request Library |
| [element-plus]          | [![element-plus-ico]][element-plus]                   | Vue3 component library |
| [element-plus-icons]          | [![element-plus-icons-ico]][element-plus-icons]                   | Vue3 component Icon library |
| [vue-quill]          | [![vue-quill-ico]][vue-quill]                   | Visual online text editor |
| [quill-image-resize]          | [![quill-image-resize-ico]][quill-image-resize]                  | online text resize image |
| [vue-cropper]          | [![vue-cropper-ico]][vue-cropper]                  | vue image cropper |
| [pinia]          | [![pinia-ico]][pinia]                  | state management |
| [vue-i18n-next]          | [![vue-i18n-next-ico]][vue-i18n-next]                  | Multi language |
| [js-md5]          | [![js-md5-ico]][js-md5]                  | MD5 encryption |
| [nprogress]          | [![nprogress-ico]][nprogress]                  | Progress bar loading |
| [echarts]          | [![echarts-ico]][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
```


[vue]: https://github.com/vuejs/vue
[vue-ico]:https://img.shields.io/badge/Vue-v3.2.36-brightgreen

[vue-router]: https://github.com/vuejs/vue-router
[vue-router-ico]:https://img.shields.io/badge/Vue--router-v4.0.15-brightgreen

[vue-cli]: https://github.com/vuejs/vue-cli
[vue-cli-ico]:https://img.shields.io/badge/Vue--cli-v5.0.1-brightgreen

[axios]: https://github.com/axios/axios
[axios-ico]:https://img.shields.io/badge/axios-v0.2.7-brightgreen

[element-plus]: https://github.com/element-plus/element-plus
[element-plus-ico]:https://img.shields.io/badge/element--plus-v2.2.2-brightgreen

[element-plus-icons]: https://github.com/element-plus/element-plus-icons
[element-plus-icons-ico]:https://img.shields.io/badge/element--plus--icons-2.x-brightgreen

[vue-quill]: https://github.com/vueup/vue-quill
[vue-quill-ico]:https://img.shields.io/badge/Vue--quill-v1.0.0--beta.8-brightgreen

[quill-image-resize]: https://github.com/kensnyder/quill-image-resize-module
[quill-image-resize-ico]:https://img.shields.io/badge/Quill--image--resize-v3.0.0-brightgreen

[vue-cropper]: https://github.com/xyxiao001/vue-cropper
[vue-cropper-ico]:https://img.shields.io/badge/vue--cropper-v1.0.3-brightgreen

[pinia]: https://github.com/vuejs/pinia
[pinia-ico]:https://img.shields.io/badge/Pinia-v2.0.14-brightgreen

[vue-jsonp]: https://github.com/LancerComet/vue-jsonp
[vue-jsonp-ico]:https://img.shields.io/badge/Vue--jsonp-v2.0.0-brightgreen

[vue-i18n-next]: https://github.com/intlify/vue-i18n-next/tree/master/packages/vue-i18n
[vue-i18n-next-ico]:https://img.shields.io/badge/Vue--i18n-v9.1.10-brightgreen

[js-md5]: https://github.com/emn178/js-md5
[js-md5-ico]:https://img.shields.io/badge/js--md5-v0.7.3-brightgreen

[nprogress]: https://github.com/rstacruz/nprogress
[nprogress-ico]:https://img.shields.io/badge/nprogress-v0.2.0-brightgreen

[echarts]: http://echarts.apache.org
[echarts-ico]:https://img.shields.io/badge/echarts-v5.3.2-brightgreen

---

## Rendering Preview

The following is the screenshot of the pro version：

![todoadmin dashboard admin management visual data screen ](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6q8qwcad4fy39f38ep4e.png)
![todoadmin banner list](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/boi3bba988dnzlqz76x5.png)
![todoadmin dashboard](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hawxa2p5vbswmput1ld7.png)
![todoadmin visual data big screen](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bwu84ajqu8sbpj968qm3.png)
![todoadmin dashboard map json](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9o02c67wdke1yf78zxbg.png)
![todoadmin vue element pinia mock php springboot](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zyp0bnz9ivjparvrubu6.png)



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