简约漂亮大气快速的后台Vue3+ElementPlus+Pinia+Echarts5,远程API和Mock双接口
2022/6/23 4:19:46
本文主要是介绍简约漂亮大气快速的后台Vue3+ElementPlus+Pinia+Echarts5,远程API和Mock双接口,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
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双接口模式加载数据。
克隆Github仓库
# 克隆项目 git clone -b https://github.com/todoadmin/vue-admin-chart.git # 安装依赖 npm i # 本地开发 启动项目 npm run serve
克隆Gitee码云仓库
# 克隆项目 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 | 多功能图表 |
项目安装(依赖安装)
npm install or yarn install
运行开发环境
npm run serve or yarn serve
生产环境打包
npm run build or yarn build
修复文件
npm run lint
配置文件
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分发
这篇关于简约漂亮大气快速的后台Vue3+ElementPlus+Pinia+Echarts5,远程API和Mock双接口的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2025-01-04React 19 来了!新的编译器简直太棒了!
- 2025-01-032025年Node.js与PHP大比拼:挑选最适合的后端技术进行现代web开发
- 2025-01-03?? 用 Gemini API、Next.js 和 TailwindCSS 快速搭建 AI 推文生成项目 ??
- 2024-12-31Vue CLI多环境配置学习入门
- 2024-12-31Vue CLI学习入门:一步一步搭建你的第一个Vue项目
- 2024-12-31Vue3公共组件学习入门:从零开始搭建实用组件库
- 2024-12-31Vue3公共组件学习入门教程
- 2024-12-31Vue3学习入门:新手必读教程
- 2024-12-31Vue3学习入门:初学者必备指南
- 2024-12-30Vue CLI多环境配置教程:轻松入门指南