简介

最近写了一个基于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()
      })
    }
  },