简单了解Vue + ElementUI后台管理模板

最近学习和项目都用到了Vue和ElementUI，自己不是专业前端，搞这些UI上的东西还是有些难度，这里推荐两个Vue + ElementUI后台管理模板

vue-element-admin

vue-element-admin

官网介绍

vue-element-admin 是一个后台前端解决方案，它基于 vue 和 element-ui实现。它使用了最新的前端技术栈，内置了 i18 国际化解决方案，动态路由，权限验证，提炼了典型的业务模型，提供了丰富的功能组件，它可以帮助你快速搭建企业级中后台产品原型。

vue-admin-template

vue-admin-template

官网介绍

这是一个极简的 vue admin 管理后台。它只包含了 Element UI & axios & iconfont & permission control & lint，这些搭建后台必要的东西。

两个模板的环境都是基于node.js，在安装vue-element-admin时需要python2.x环境(此处必须为python2.x)，执行npm install命令时，可能会出现sass node_module下载失败，这是因为国内网络被墙的原因，解决方案，在项目根目录下添加了一个.npmrc文件，文件内容如下

sass_binary_site=https://npm.taobao.org/mirrors/node-sass/
registry=https://registry.npm.taobao.org

如果安装中还出现其他错误可以参考

https://github.com/PanJiaChen/vue-element-admin/issues/24

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • Vue+ElementUI使用vue-pdf实现预览功能

    Vue + ElementUI项目中使用vue-pdf实现简单预览,供大家参考,具体内容如下 1.安装 vue-pdf npm install --save vue-pdf 2.在vue页面中导入对应的组件 我这是通过点击 预览 按钮 获取id打开一个dialog来实现 <!--PDF 预览--> <el-dialog :title="PDF 预览" :visible.sync="viewVisible" width="80%"

  • vue.js+ElementUI实现进度条提示密码强度效果

    要求一:判断输入的字符串是否包含数字.小写字母.大写字母以及特殊字符四种内容的8-20位字符 通过搜索了解到可以使用?=这个正则语法判断字符串中是否含有多种内容.(?=)这个语法结构在正则里表示"设定后面是"的意思,举下面几个例子进一步了解?=这个语法: (?=.*[a-zA-Z])  这句的意思就是后面必须有一位大写或小写字母 (?=.*[1-9]) 这句的意思是后面必须有一位数字 (?=.*[\W]) 这句的意思是后面必须有一个非字母数字及下划线的特殊符号 (?!.*[\u4E00

  • vue+elementUi 实现密码显示/隐藏+小图标变化功能

    vue+elementUi 实现密码显示/隐藏+小图标变化(js一共三行代码,其中一行为了美观)...,先给大家展示下效果图,感觉不错可以参考实现代码. [效果图] [html] // 前后代码[略] <el-form-item label="密码" prop="pwd"> <el-input v-model="ruleForm.pwd" :type="pwdType" placeholder="请

  • vue+elementUI组件table实现前端分页功能

    前端分页和后端分页就是请求的差异,前端分页的话只请求一次,所以要在render table组件的时候控制下数据 :data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)"   //不多解释 再就是设置分页器total等于table数据的长度 :total="tableData.length" 点击分页器的操作 methods: { handleSizeChange(val) { con

  • vue中使用elementUI组件手动上传图片功能

    Vue框架简介 Vue是一套构建用户界面的框架, 开发只需要关注视图层, 它不仅易于上手,还便于与第三方库或既有项目的整合.是基于MVVM(Model-View-ViewModel)设计思想.提供MVVM数据双向绑定的库,专注于UI层面 使用elementUI上传图片时遇到跨域问题,所以需要自己写一个手动上传图片的方法 代码: html <el-upload class="upload-demo" ref="upload"//绑定ref 清空时会用到 :lim

  • 解决vue elementUI中table里数字、字母、中文混合排序问题

    1.使用场景 使用elementUI中的table时,给包含数字字母中文的名称等字段排序 例如:数字(0->9)->大写字母(A->Z)->小写字母(a->z)->中文拼音(a->z) 2.代码解析 <el-table ref="multipleTable" border tooltip-effect="dark" class="xg-table" style="width: 100%&q

  • Vue+ElementUI table实现表格分页

    Vue+ElementUI table表格分页,供大家参考,具体内容如下 分页的两种方式.前端分页,后端分页.两种方式各有个的优缺点吧. 前端分页:后台只需将数据返回,不需要做过多处理,前端一次请求拿到所有数据后做分页处理.但数据量不能太大,因为前端是先一次性加载所有数据,然后在做分页处理.在数据量多的情况下,加载相对应的会变慢.所有在前端做分页时要先考虑一下后期的数据量. 后端分页:因为是后端分页,前端在每点击一次分页时,便向后台请求一次数据.其实就是避免前端一次性从数据库获取大量数据 一.在

  • vue elementui 实现搜索栏公共组件封装的实例代码

    vue elementui 实现搜索栏公共组件封装的实例代码

    1.背景 vue后台管理系统,会有很多表格页面,表格上方会有一些搜索选项,表格直接使用el-table即可,而搜索栏区域每次写起来都很繁琐,而且多人开发情况下每个人写的样式都不相同,布局样式无法统一. 所以要考虑对搜索栏做一个封装,统一配置引用,提升开发维护效率和界面统一. 完成后的效果大概就是长这样: 2.分析 项目使用的是elementui框架,搜索栏这种表单提交,首先要使用el-form组件来封装,而复杂点就是表单项可能有很多种,例如input输入框.select选择框.日期时间选择框.日

  • 简单了解Vue + ElementUI后台管理模板

    最近学习和项目都用到了Vue和ElementUI,自己不是专业前端,搞这些UI上的东西还是有些难度,这里推荐两个Vue + ElementUI后台管理模板 vue-element-admin vue-element-admin 官网介绍 vue-element-admin 是一个后台前端解决方案,它基于 vue 和 element-ui实现.它使用了最新的前端技术栈,内置了 i18 国际化解决方案,动态路由,权限验证,提炼了典型的业务模型,提供了丰富的功能组件,它可以帮助你快速搭建企业级中后台产

  • vue实现后台管理权限系统及顶栏三级菜单显示功能

    vue实现后台管理权限系统及顶栏三级菜单显示功能

    •效果演示地址 项目demo展示 重要功能总结 权限功能的实现 权限路由思路: 根据用户登录的roles信息与路由中配置的roles信息进行比较过滤,生成可以访问的路由表,并通过router.addRoutes(store.getters.addRouters)动态添加可访问权限路由表,从而实现左侧和顶栏菜单的展示. 实现步骤: 1.在router/index.js中,给相应的菜单设置默认的roles信息: 如下:给"权限设置"菜单设置的权限为:meta:{roles: ['admin

  • VUE+element开发后台管理的搜索功能

    VUE+element开发后台管理的搜索功能

    本文实例为大家分享了VUE element后台管理搜索功能的具体代码,供大家参考,具体内容如下 先看看样式图: 实现上面这种简单搜索简单的三步走: 1.页面样式:在页面中使用form表单的校验功能来实现输入搜索.给表单的数据放入搜索请求的data数组中,也就是searchParams这个大集合中. 备注:如果给每个输入框添加了搜索按钮的click方法,则会在输入完成后直接执行列表搜索.所以考虑自己使用的具体位置. <div class="search">     <e

  • 详解如何使用Vuex实现Vue后台管理中的角色鉴权

    目录 前言 功能分析 实现思路 代码实现 vuex中定义user模块,存储用户信息以及用户侧边导航数据 router中路由meta中新增roles 定义当前路由可以访问的所有的角色 router新增路由前置首位 做权限拦截 侧边导航页面 使用 getters中的 authMenus 循环侧边导航 最后一步 登录页登录时调用 请求登录的action即可大功告成 总结 前言 一直以来,我们使用vue做后台管理时,不同角色的权限功能,都是我们老大难的问题,本篇文章我将手把你带你实现vue后台管理中的用

  • vue+element-ui JYAdmin后台管理系统模板解析

    项目搭建时间:2020-06-29 本章节:讲述基于vue/cli,项目的基础搭建. 本主题讲述了: 1.跨域配置 2.axios请求封装 3.eslint配置 4.环境dev,test,pro(开发,测试,线上),run自动调用对应的接口(proxy多代理配置) vue+element-ui JYAdmin后台管理系统模板-集成方案从零到一的手写搭建全过程. 该项目不仅是一个持续完善.高效简洁的后台管理系统模板,还是一套企业级后台系统开发集成方案,致力于打造一个与时俱进.高效易懂.高复用.易维

  • 详解Vue Elememt-UI构建管理后台

    安装 我使用的是 vue-cli 初始化项目,命令如下: npm i -g vue-cli mkdir my-project && cd my-project vue init webpack 修改 package.json 文件: ... "dependencies": { "vue": "^2.5.2", "vue-router": "^3.0.1", "element-ui&

  • VUE搭建分布式医疗挂号系统后台管理页面示例步骤

    VUE搭建分布式医疗挂号系统后台管理页面示例步骤

    目录 前言 一.搭建前端环境 (1)引入项目到项目工作区 (2)根据package.json下载依赖 (3)启动创建好的前端项目 二.前端环境目录结构 (1)总体目录概览 (2)关键文件 package.js build/webpack.dev.conf.js index.html src/main.js config/dev.env.js src/utils/request.js src/api/login.js 三.登录改造 登入方法改造 获取用户信息方法改造 登出方法改造 前端登出方法改造

  • Vue 电商后台管理项目阶段性总结(推荐)

    一.阶段总结 该项目偏向前端更多一点,后端 API 服务是已经搭建好了的,我们只需要用既可以,(但是作为一个 全栈开发人员,它的数据库的表设计,Restful API 的设计是我们要着重学习的!!!) 这个vue 项目是从 2020 4月开始,一直开发直至 5月23日 部署上线,也算是我的第二个 vue 的实战项目(其实是熟悉 elementUI 的使用),在开发过程中使用 Vue cil4 脚手架进行开发,使用码云作为 Git 管理仓库, 目前已经基本开发完毕,在服务器上也能够正常运行 (ng

  • vue后台管理如何配置动态路由菜单

    vue后台管理如何配置动态路由菜单

    目录 后台管理配置动态路由菜单 根据权限生成动态路由及导航菜单 后台管理配置动态路由菜单 前段时间做一个后台管理项目,因为超级管理员可以给普通管理员动态更改权限,所以vue-element-admin里的写死的权限路由菜单就不太适合我,自己研究了好半天,经历了各种死循环,终于差不多弄出了一个,可能会有点啰嗦,总结一下: 我这个后台分为三个角色:超级管理员.企业管理员和普通管理员.其中,超级管理员可以查看所有的路由菜单,企业管理员也是固定的几个菜单,所以,超级管理员和企业管理员是我在前端写好的路由

  • VUE实现Studio管理后台之鼠标拖放改变窗口大小

    近期改版RXEditor,把改版过程,用到的技术点,记录下来.昨天完成了静态页面的制作,制作过程并未详细记录,后期已经不愿再补了,有些遗憾.不过工作成果完整保留在github上,地址:https://github.com/vularsoft/studio-ui 这个项目下面的html-demo.html,便是静态文件. 话不多说,今天就把昨天的HTML转化成VUE. 先看效果: 布局原理 页面采用纯弹性盒子flex box布局,无float postion等,页面分成如下几个区域: 细实线描述的

随机推荐