使用vue3.0和element实现后台管理模板

bydzhangxiaowei bydzhangxiaowei     2022-12-11     800

关键词:

使用vue3.0和element实现后台管理模板:https://www.cnblogs.com/zhoulifeng/p/10123632.html

 

通过自己所学的这段时间,利用空余时间,使用vue3.0脚手架搭建的一个关于后台的管理模板,所实现功能也是模仿一个后台的界面,数据分为两种存放,一种是直接存储到mlab,这里的数据是存放这登录注册,只有注册了自己的账号才能访问到页面,另一些数据直接存放在easy-mock里,

源码地址:https://github.com/MrZHLF/vue-admin

自己需要搭建vue3.0的脚手架,在这里就不用讲关于vue3.0的脚手架怎么搭建。vue3.0脚手架需要node版本10以上,这样的话,可以使用nvm来管理自己的node版本,直接通过官网https://github.com/coreybutler/nvm-windows/releases。通过下载包进行安装,然后环境配置就可以使用了

  • 比例安装 nvm install  10.10.0 node10的版本和  nvm install  10.14.2两个版本
  • 当我们切换的是可以使用 nvm use 10.10.0,这样就切换到10.10.0的版本了

 一写登录注册的数据,是使用node+mongodb去完成编写的,登录注册的数据存放到mlab里面

效果展示

技术图片

 

相关技术

  1.使用vue3.0最新脚手架搭建环境

  2.axios:数据请求

  3.element-ui:基于vuejs2.0的ui组件库。

  4.vuex:是一个专为 Vue.js 应用程序开发的状态管理模式。

  5.vue-router:一般单页面应用spa都要用到的前端路由。

  6.moment:时间日期格式

  7.echarts:炫酷的图表库插件

  8.vue-quill-editor:一款优秀的富文本编辑器

  9.mavon-editor:一款Markdown编辑器

  10.jwt-decode:用于解析token

实现功能

  1..实现数据的增删改查

  2.请求拦截和响应拦截

  3.token存储

  4.主题颜色更换

  5.递归组件使用

  6.路由守卫

  7.导出Excel表格

  8.分页

·   9.vue配置跨域问题

使用方法

直接打开这个网站会跳转到我的github当中,

源码地址:https://github.com/MrZHLF/vue-admin

 

1.克隆源码: git clone https://github.com/MrZHLF/vue-admin.git

克隆完之后,会出现一下目录

  • 先要在当前进行初始化一下 cnpm install
  • 然后进入client目录进行初始化一下 cnpm install 
  • 然后在返回主目录运行(就是截图的这个界面) cnpm run  dev
  • 运行之后,如果登录报错500,需要安装一个nodemon插件,因为配置了package启动node服务命令,安装完之后,再次运行就不会出现问题

技术图片

 

 以上都是所介绍的功能以及怎么使用,如果喜欢,在github帮忙star,你们的点赞,更能激发小编的动力去继续完善

后台管理系统模板

1:vue-element-adminGithub地址:https://github.com/PanJiaChen/vue-element-admindemo预览体验地址:https://panjiachen.github.io/vue-element-admin/#/dashboard一个基于vue2.0和Eelement的控制面板UI框架,这是使用vue技术栈开发的前端程序员的首选管理系统模板 查看详情

vue后台管理系统模板(代码片段)

...Vue的后端管理的框架。目前比较流行和Vue搭配的UI组件有Element-UI、iview、Bootstrap-Vue、Ant-Design-Vue,另外还有Vuetify、Buefy(Bulmacss)、VueMaterial等等。基于这些组件库封装的后台管理模板,推荐一些常用VUE后台模板给... 查看详情

vue+element-ui实现后台管理系统---封装一个form表单组件和table表格组件(代码片段)

...键部分代码,项目代码放在github上:mall-manage-system1、Vue+Element-ui实现后台管理系统(1)---总述2、Vue+Element-ui实现后台管理系统(2)---项目搭建+??布局实现3、Vue+Element-ui实现后台管理系统(3)- 查看详情

vue+element-ui实现后台管理系统---封装一个form表单组件和table表格组件(代码片段)

...键部分代码,项目代码放在github上:mall-manage-system1、Vue+Element-ui实现后台管理系统(1)---总述2、Vue+Element-ui实现后台管理系统(2)---项目搭建+??布局实现3、Vue+Element-ui实现后台管理系统(3)- 查看详情

springboot+vue+elementui实现后台管理系统模板--后端篇:数据表设计使用jwtredissms工具类完善注册登录逻辑(代码片段)

(1)相关博文地址:SpringBoot+Vue+ElementUI实现后台管理系统模板--前端篇(一):搭建基本环境:https://www.cnblogs.com/l-y-h/p/12930895.htmlSpringBoot+Vue+ElementUI实现后台管理系统模板--前端篇(二):引入element-ui定义基本页面显示:https://w... 查看详情

vue-element-admin后台管理系统(代码片段)

文章目录前言一、vue-element-admin是什么?二、使用步骤下载和部署浏览模板项目代码官网启动三.技术提炼1.vue全家桶都有什么2.vuex什么时候用文件,什么时候直接写vue页面导航守卫3.组件之间的通信4.请求/响应式拦截器5.vu... 查看详情

vue3.0实现数据懒加载(代码片段)

...r(H5新增,不支持ie) 在没有这方法前使用 Element.getBoundingClientRect()1 查看详情

vue+element-uijyadmin后台管理系统模板-集成方案项目搭建篇1(代码片段)

...节:讲述基于vue/cli,项目的基础搭建。本主题讲述了vue+element-uiJYAdmin后台管理系统模板-集成方案,从零到一的手写搭建全过程。该项目不仅是一个持续完善、高效简洁的后台管理系统模板,还是一套企业级后台系统开发集成方案... 查看详情

使用vuejs2.0和element-ui搭建的一个后台管理界面

说明:  这是一个用vuejs2.0和element-ui搭建的后台管理界面。 相关技术:  vuejs2.0:渐进式JavaScript框架,易用、灵活、高效,似乎任何规模的应用都适用。  element-ui:基于vuejs2.0的ui组件库。  vue-router:一般单页面应... 查看详情

使用vuejs2.0和element-ui搭建的一个后台管理界面

说明:  这是一个用vuejs2.0和element-ui搭建的后台管理界面。相关技术:  vuejs2.0:一套构建用户界面的渐进式JavaScript框架,易用、灵活、高效。  element-ui:一套为开发者、设计师和产品经理准备的基于Vue2.0的组件库。 ... 查看详情

vue+element-uijyadmin后台管理系统模板-集成方案项目搭建篇2(代码片段)

...上),run自动调用对应的接口(proxy多代理配置) vue+element-uiJYAdmin后台管理系统模板-集成方案从零到一的手写搭建全过程。该项目不仅是一个持续完善、高效 查看详情

前端开发框架都有哪些?

...我这里给你推荐几个常用的框架,可以按需使用。1、vue-element-admin一个基于vue2.0和Element的控制面板UI框架,这是使用vue技术栈开发的前端程序员的首选管理系统模板,模板已经非常成熟了,并且有相关的社区和维护人员,开发时... 查看详情

vue+element-ui实现后台管理系统---封装一个echarts组件的一点思路(代码片段)

...键部分代码,项目代码放在github上:mall-manage-system1、Vue+Element-ui实现后台管理系统(1)---总述2、Vue+Element-ui实现后台管理系统(2)---项目搭建+??布局实现3、Vue+Element-ui实现后台管理系统(3)--- 查看详情

vue+element-ui实现后台管理系统---封装一个echarts组件的一点思路(代码片段)

...键部分代码,项目代码放在github上:mall-manage-system1、Vue+Element-ui实现后台管理系统(1)---总述2、Vue+Element-ui实现后台管理系统(2)---项目搭建+??布局实现3、Vue+Element-ui实现后台管理系统(3)--- 查看详情

基于java+springboot+vue+element实现汽车订票管理平台详细设计和实现(代码片段)

🍅作者简介:CSDN特邀作者✌、博客专家✌、java领域优质创作者💪🍅关注公众号【java李杨勇】 简历模板、学习资料、面试题库等都给你💪🍅文末获取源码联系🍅🍅新星计划·第三季【Java】赛... 查看详情

实战项目:基于vue第三方库element-ui实现的金融后台管理系统

参考技术A链接:https://github.com/wdlhao/vue2-element-touzi-admin项目是vue2.0+element-ui+node+mongodb构建的后台管理系统,所有的数据都是从服务器实时获取的真实数据,具有真实的注册、登录、数据显示、新增数据、修改数据、删除数据等功... 查看详情

[开源]如何使用goapp写你的后台管理系统_golang

 简析基于Gin+GORM+Casbin+vue-element-admin实现的权限管理系统。基于Casbin实现RBAC权限管理。前端实现:vue-element-admin。开源地址见文末。 原由前阵子把goapp开源后,不少朋友加我,一些朋友对vue还比较陌生,不知道如何添加自... 查看详情

springboot+vue+elementui实现后台管理系统模板--前端篇:使用vue-router进行动态加载菜单

...ringBoot+Vue+ElementUI实现后台管理系统模板--前端篇(六):使用vue-router进行动态加载菜单​​阅读目录​一、获取动态菜单数据​​​1、介绍​​​​2、使用mock模拟返回动态菜单数据​​​​3、动态菜单数据国际化问题​​​... 查看详情