关键词:
概述:
这是一个用vuejs2.0和element搭建的后台管理界面。
技术栈:
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页面
源码地址 https://github.com/yjx-passion/vue2.0-module
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)=>varindex=-1;for(vari=0;i<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权限架构和常规基础模块,为了敏捷快速开发,提升研发效率,框架内置... 查看详情