简介

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