vue2.0+elementui后台管理系统

大白菜丶 大白菜丶     2022-08-31     579

关键词:

概述:

  这是一个用vuejs2.0element搭建的后台管理界面。

 

技术栈:

  vue2.0:渐进式JavaScript框架,易用、灵活、高效,似乎任何规模的应用都适用。

  element ui:基于vue2.0的ui组件库。

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

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

  webpack + es6/7 + less

  mock.js : 相对于其他同类的框架的实现,mock.js超出了我的意料。

  • 基于 数据模板 生成模拟数据。
  • 基于 HTML模板 生成模拟数据。
  • 拦截并模拟 ajax 请求。
  • 无需等待,让前端独立于后端进行开发,

项目截图

登录页面

table页面

图表页面
 
 
 
项目运行

cd vue2-module  

npm install

npm run dev

源码地址  https://github.com/yjx-passion/vue2.0-module

 

说明

 如果对您对此项目有兴趣,可以点 "Star" 支持一下 谢谢! ^_^

 或者您可以 "follow" 一下,我会不断开源更多的有趣的项目

vue2.0-elementui

main.jsimportVuefrom‘vue‘importAppfrom‘./App.vue‘importElementUIfrom‘element-ui‘import‘element-ui/lib/theme-default/index.css‘Vue.use(ElementUI);newVue({el:‘#app‘,render:h=>h(App)})App.vue<templ 查看详情

vue2.0-基于elementui换肤[自定义主题]

0.直接上预览链接vue2.0-基于elementui换肤[自定义主题]1.项目增加主题组件在项目的src/components下添加skin文件夹skin文件获取地址2.项目增加自定义主题自定义添加主题下载地址https://elementui.github.io/theme-chalk-preview/#/zh-CN3.项目引入和... 查看详情

vue2.0+elementui实现表格翻页

ElementUI的表格要求的数据类型为字典数组。我使用了python3写后端,那么从数据库取数据时添加一行cursorclass=pymysql.cursors.DictCursor即可。取出后我将其存入redis数据库方便之后取用。取用时使用eval()函数再传到前端即可。前端放置P... 查看详情

vue2.0+elementui+pagehelper实现的表格分页

Vue2.0+ElementUI+PageHelper实现的表格分页前言最近做了一些前端的项目,要对表格进行一些分页显示。表格分页的方法有很多,从宏观上来说分为物理分页和逻辑分页,由于逻辑分页(即前端分页)的做法是将数据全部缓存,然后分... 查看详情

vue2.0+elementui实现面包屑导航栏(代码片段)

Main.jsvarrouteList=[];router.beforeEach((to,from,next)=&gt;varindex=-1;for(vari=0;i&lt;routeList.length;i++)if(routeList[i].name==to.name)index=i;break;if(index!==-1)//如果存在路由列表,则把之后的路由都 查看详情

vue2.0那些坑之使用elementui后v-on:click事件不生效问题

最近在维护vue2.0的项目,遇到了不少坑,在这里说下引用elementui之后,使用v-on:click绑定点击事件无效的情况,如下图:  我想阻止冒泡事件,发现无效。这里将@click换成了@click.native,就有效果了,具体原因不清楚,有哪位... 查看详情

vue2.0+element+node+webpack搭建的一个简单的后台管理界面(代码片段)

 1.检查本地是否安装node:node-v                              查看详情

vue2.0全局组件之pdf

目的:像elementUI那样注册全局组件预览pdf文件技术支持:使用火狐的pdf.js http://mozilla.github.io/pdf.js/准备:新建一个CPdf.vue文件,把火狐demo里面的build里面的pdf.js下载来,并且依赖了elementUI开发的其实就是用了<el-button>编写... 查看详情

elementui获取下拉框中文名字

...键名,绑定值为对象类型时必填el-option:value赋值为item。ElementUI是一套采用Vue2.0作为基础框架实现的组件库,一套为开发者、设计师和产品经理准备的基于Vue2.0的组件库,提供了配套设计资源,帮助网站快速成型。 查看详情

毕业设计springboot+vue+elementui商城系统讲解(有后台)

商城后台系统讲解 查看详情

springboot+vue+elementui实现后台管理系统模板

...p;前提:(1)相关博文地址:SpringBoot+Vue+ElementUI实现后台管理系统模板--前端篇(一):搭建基本环境:https://www.cnblogs.com/l-y 查看详情

vue2.0+elementui构建树形表格(代码片段)

解决:本来想在网上博客找一找解决方法,奈何百度到的结果都不尽人意,思维逻辑不清,步骤复杂,代码混乱,找了半天也没找到一个满意的,所以干脆就自己动手写一个思路:table需要的数据是array,所以树结构数据要转化... 查看详情

前端vue+elementui案例:通用后台管理系统-代码总结(代码片段)

文章目录前言项目文件目录apimockServehome.jspermission.jsindex.jsmock.jsuser.jsassertcomponentsCommonAside.vueCommonHeader.vueCommonTags.vuedataechartsDataorder.jsuser.jsvideo.jsmockDatatableData.jsuserData.jsvide 查看详情

vue+elementui搭建后台项目(代码片段)

...言之前有些过移动端的项目搭建的文章,感觉不写个pc端管理系统老感觉少了点什么,最近公司项目比较多,恰巧要做一个申报系统的后台管理系统,鉴于对vue技术栈比较熟悉,所以考虑还是使用vue技术栈来做;看过一个不错的... 查看详情

laravel9+vue+elementui通用后台管理系统

...架构敏捷开发框架,可用于快速搭建前后端分离后台管理系统,本着简化开发、提升开发效率的初衷,目前框架已集成了完整的RBAC权限架构和常规基础模块,为了敏捷快速开发,提升研发效率,框架内置... 查看详情

一个后台管理平台,用vue+elementui写的,有个附件上传之后,下载不下来

参考技术A一个后台管理平台,用vue+elementUI写的,有个附件上传之后,下载不下来方法:修改一下格式。管理软件平台,是企业现实运营中使用的有形和无形相结合的管理体系。 查看详情

laravel9+vue+elementui通用后台权限管理系统

...架构敏捷开发框架,可用于快速搭建前后端分离后台管理系统,本着简化开发、提升开发效率的初衷,目前框架已集成了完整的RBAC权限架构和常规基础模块,为了敏捷快速开发,提升研发效率,框架内置... 查看详情

laravel9+vue+elementui快速搭建后台管理系统

...架构敏捷开发框架,可用于快速搭建前后端分离后台管理系统,本着简化开发、提升开发效率的初衷,目前框架已集成了完整的RBAC权限架构和常规基础模块,为了敏捷快速开发,提升研发效率,框架内置... 查看详情