前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >简约漂亮快速的后台Vue3+ElementPlus+Pinia+Echarts5,使用远程API和Mock数据双接口,Composition api风格

简约漂亮快速的后台Vue3+ElementPlus+Pinia+Echarts5,使用远程API和Mock数据双接口,Composition api风格

原创
作者头像
程序猿视觉
修改2022-06-22 11:22:15
1.1K0
修改2022-06-22 11:22:15
举报

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

体验Demo地址

Todoadmin-pro Pro专业版(vue3.2+ 支持 PC、平板、手机)

https://pro.todoadmin.com

Todoadmin-base 基本版(vue3.2+ 支持 PC、平板、手机)

https://base.todoadmin.com

用户名:guest

密码:123456

克隆Github仓库

代码语言:javascript
复制
# 克隆项目
git clone -b  https://github.com/todoadmin/vue-admin-chart.git
# 安装依赖
npm i
# 本地开发 启动项目
npm run serve

克隆Gitee码云仓库

代码语言:javascript
复制
# 克隆项目
git clone -b  https://gitee.com/todoadmin/vue-admin-chart.git
# 安装依赖
npm i
# 本地开发 启动项目
npm run serve

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

标题名称

版本

描述

vue

3.2+

构建用户界面的渐进式框架

vue-router

4.0+

单页应用程序路由

vue-cli

5+

项目脚手架

axios

0.2.7

基于promise的网络请求库

element-plus

2.2+

基于Vue3的组件库

element-plus-icons

2.2+

基于Vue3的组件图标库

vue-quill

1.0.0.beta.8

可视化在线文本编辑器

quill-image-resize

3.0+

文本编辑器图片重置尺寸

vue-cropper

1.0+

基于Vue3的图片裁剪

pinia

2.0+

状态管理

vue-i18n-next

9.1+

多国语言文字切换

js-md5

0.7.3

MD5加密

nprogress

0.2.0

进度条加载

echarts

5.3.2

多功能图表

项目安装(依赖安装)

代码语言:javascript
复制
npm install   or  yarn install

运行开发环境

代码语言:javascript
复制
npm run serve  or  yarn serve

生产环境打包

代码语言:javascript
复制
npm run build  or  yarn build

修复文件

代码语言:javascript
复制
npm run lint

配置文件

代码语言:javascript
复制
config.js

后台效果图预览

以下是截取效果图展示:

前后端功能简介

前端

· 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分发

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 体验Demo地址
  • 克隆Github仓库
  • 克隆Gitee码云仓库
  • 项目生态插件【依赖】列表
  • 项目安装(依赖安装)
    • 运行开发环境
      • 生产环境打包
        • 修复文件
        • 配置文件
        • 后台效果图预览
        • 前后端功能简介
        相关产品与服务
        内容分发网络 CDN
        内容分发网络(Content Delivery Network,CDN)通过将站点内容发布至遍布全球的海量加速节点,使其用户可就近获取所需内容,避免因网络拥堵、跨运营商、跨地域、跨境等因素带来的网络不稳定、访问延迟高等问题,有效提升下载速度、降低响应时间,提供流畅的用户体验。
        领券
        问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档