Vue2.0 + ElementUI 手写权限管理系统后台模板（一）——简述

_ivan 发布于2019-08-23 14:06 / 2041人阅读

摘要：简介最近写了一个基于权限管理系统的后台模板，包含了正常项目开发所需的框架功能，开发者使用的时候只需要专注于项目的业务逻辑就好。同时接下来会让你拥有一个自己完全掌控的框架。

简介

最近写了一个基于vue2.0+element-ui权限管理系统的后台模板，包含了正常项目开发所需的框架功能，开发者使用的时候只需要专注于项目的业务逻辑就好。同时接下来会让你拥有一个自己完全掌控的框架。

源码地址：

github：https://github.com/Nirongxu/v...

码云：https://gitee.com/nirongxu/xu...

预览地址：https://nirongxu.github.io/vu...

vue-xuAdmin是基于vue2.0全家桶 + element-ui 开发的一个后台模板，实现了无限级菜单，页面、按钮级别的权限管理，为了减少前后端的沟通成本，页面、按钮级别的权限验证和动态路由表的存储校验，也都由前端完成，这样前端新建页面或者删除页面都不需要告诉后台去增加删除路由表

部分截图

2. 准备工作

-开发环境

node.js v8.0+

webpack v3

git

-技术栈

ES6+

vue2.0+

vue-router

vuex

axios

scss

element-ui v2.4+

3. 基础框架功能

- 登录、退出
+ 基于token
    - 状态拦截、404页面
    - 动态加载路由
    - 页面、按钮指令权限管理
    - 无限级菜单
- 封装vue-i18n@8.x国际化组件
- 系统全屏化
- 菜单收缩
- icon 图标
+ tab标签导航
    - 右击快捷功能
- 表格拖拽排序
- 编辑器
    - markdown（编辑器目前只封装了这一个组件，重写了markdown编辑和预览的皮肤，实时获取：markdown，html，json 三种格式文本）
- Echarts 组件封装

封装了一些element-ui没有但是常用的组件，正常需要的功能element-ui里面都有，可以直接复制，如果element-ui不能满足你的需求只有自己写了

4. 开发 登录

登录页面只有输入账号密码，需要验证码的可以自行去搜第三方验证插件，有收费有免费。这里仅为了测试，就把输入的账号当做 token 来存储，完成整个系统的会话，实际开发以登录成功后后台返回的 token 为准

// 登录页面
submitForm () {
      let that = this
      if (this.loginForm.username === "" || this.loginForm.password === "") {
        this.$message({
          showClose: true,
          message: "账号或密码不能为空",
          type: "error"
        })
        return false
      } else {
        // 将 username 设置为 token 存储在 store，仅为测试效果，实际存储 token 以后台返回为准
        that.$store.dispatch("setToken", that.loginForm.username).then(() => {
          that.$router.push({path: "/"})
        }).catch(res => {
          that.$message({
            showClose: true,
            message: res,
            type: "error"
          })
        })
      }
    },

// vuex 
  state: {
    token: Cookies.get("token") // 防止刷新页面或者在新标签页打开，从cookie获取初始token
  },
  mutations: {
    setToken (state, token) {
      state.token = token
      Cookies.set("token", token ,{ expires: 1/24 }) // 引用‘js-cookie’模块，存储 token 到cookie
    }
  },
  actions: {
    setToken ({commit}, token) {
      return new Promise((resolve, reject) => {
        commit("setToken", token)
        resolve()
      })
    }
  },

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/100077.html

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

摘要：直接上预览链接基于换肤自定义主题项目增加主题组件在项目的下添加文件夹文件获取地址项目增加自定义主题自定义添加主题下载地址项目引入和使用选择你想要随主题改变的元素在里面，不希望随主题改变的可以注释掉选择皮肤之后把记录存在里面。 0. 直接上预览链接 [vue2.0-基于elementui换肤[自定义主题]](https://mgbq.github.io/vue-pe... 1. ...

lx1036 2019-08-29 15:17 评论0 收藏0
vue2.0-基于elementui换肤[自定义主题]

摘要：直接上预览链接基于换肤自定义主题项目增加主题组件在项目的下添加文件夹文件获取地址项目增加自定义主题自定义添加主题下载地址项目引入和使用选择你想要随主题改变的元素在里面，不希望随主题改变的可以注释掉选择皮肤之后把记录存在里面。 0. 直接上预览链接 [vue2.0-基于elementui换肤[自定义主题]](https://mgbq.github.io/vue-pe... 1. ...

scwang90 2019-08-26 11:53 评论0 收藏0
vue2.0+axios+elementUI实现增删改查

最近尝试使用vue+element实现增删改查功能，在实现的过程中遇到了蛮多问题，现在总结如下：首先安装相关的插件1、根据vue官网推荐，使用axios进行前后台交互，安装axiosnpm install axios -S2、安装elementUI，官网npm i element-ui -S3、安装 loader 模块npm install style-loader -Dnpm install c...

rollback 2019-08-23 10:33 评论0 收藏0