ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

非常漂亮大气的后台基于Vue3.2+ElementPlus2.2+Pinia+Echarts5,使用远程API和Mock数据双接口,Composition api风格

2022-06-21 13:32:28  阅读:140  来源: 互联网

标签:npm vue Vue ElementPlus2.2 支持 api 接口 com Composition


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地址

用户名:guest

密码:123456

 

克隆Github仓库

# 克隆项目

git clone -b  https://github.com/todoadmin-com/vue3-elementPlus-pinia.git

# 安装依赖

npm i

# 本地开发 启动项目

npm run serve

 克隆Gitee码云仓库

# 克隆项目

git clone -b  https://gitee.com/todoadmin-com/vue3-element-plus-pinia.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分发

 

 

 

 

标签:npm,vue,Vue,ElementPlus2.2,支持,api,接口,com,Composition
来源: https://www.cnblogs.com/vpanda666/p/16396521.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有