1. 相关网站

官网地址: panjiachen.gitee.io/vue-element…

下载地址: github.com/PanJiaChen/…

2. 搭建步骤

2.1 配置仓库并启动

npm config get registry

npm config set registry registry.npmmirror.com

npm install

npm run dev

2.2 禁用 eslint

2.2.1.vue.config.js： vue-cli 配置

将vue.config.js脚本文件中的 lintOnSave: process.env.NODE_ENV === 'development' 改成 lintOnSave:false

2.2.2. package.json

将package.json文件中的下述代码删除

"husky": { "hooks": { "pre-commit": "lint-staged" } }

2.2.3. .eslintignore

在.eslintignore文件最后一行加入 * 。

build/*.js
src/assets
public
dist
*

2.2.4 如何引入公共组件

src/utils:全局公用方法

然后把组件注入全局：main.js，入口文件加载组件初始化等

使用方法：this.$objCopy(row, this.dept)

2.2.5 对于一个组件页面的组成部分

表单- 表格数据- 分页

2.2.6 项目结构

登录入口：authority-system/src/views/login/index.vue

我调用的接口定义的的路径src/api 调用的方式 import departmentApi from "@/api/department";

export default { async checkDepartment(params){ return await http.getRestApi("/api/department/check",params); }, }

或者这个样子 import {getRoles, addRole, deleteRole, updateRole, checkRole, assignSaveApi} from "@/api/role";

export async function assignSaveApi(params){ return await http.post("/api/role/saveRoleAssign",params); }

我建议第一种方式

2.2.7 登录的页面自动挂载上焦点

mounted() {
    //如果用户名为空，则焦点聚焦到用户名输入框
    if (this.loginForm.username === '') {
      this.$refs.username.focus()
    } else if (this.loginForm.password === '') {
      this.$refs.password.focus()
    }
  },

2.2.7 如何去掉mock的数据

修改vue.config.js文件，将vue.config.js文件中的mock请求注释掉，并设置代理

devServer: {
  port: port,
  open: true,
  overlay: {
    warnings: false,
    errors: true
  },
// before: require('./mock/mock-server.js') //代理配置  
    proxy: {
        [process.env.VUE_APP_BASE_API]: {
          target: "http://localhost:8089/api",
          changeOrigin: true,
          pathRewrite: {'^/api': '' 
          }
       }
    }
}

修改main.js，将main.js文件中的如下代码注释

if (process.env.NODE_ENV === 'production') {
  const { mockXHR } = require('../mock')
  mockXHR()

2.2.8 重写request.js文件

里面涉及的东西还是蛮多的，中间学习了axios，参考 juejin.cn/post/728518…

import axios from 'axios'
import { MessageBox, Message } from 'element-ui'
import store from '@/store'
import { getToken } from '@/utils/auth'
//导入qs依赖
import qs from 'qs'

// 创建axios异步请求实例
const service = axios.create({
  baseURL: process.env.VUE_APP_BASE_API, 
  // 请求超时时间
  timeout: 500000 
})

// 请求前进行拦截
service.interceptors.request.use(config => {
    console.log(config)
    // 判断store中实现存在token
    if (store.getters.token) {
      //读取token信息，并将token添加到headers头部信息
      config.headers['token'] = getToken()
    }
    return config
  },
  error => {
    return Promise.reject(error)
  } 
)
// 响应时拦截
service.interceptors.response.use(
  response => {
    //获取后端返回的数据
    const res = response.data
    // 如果后端返回的状态码不是200，则提示错误信息，错误信息显示5s
    if (res.code !== 200) {
      Message({
        message: res.message || 'Error',
        type: 'error',
        duration: 5 * 1000
      })
      // 50008: 非法的 token; 50012: Other clients logged in; 50014: Token 过期;
      if (res.code === 50008 || res.code === 50012 || res.code === 50014) {
          // 重新登录
          MessageBox.confirm('用户登录信息过期，请重新登录', '系统提示', {
            confirmButtonText: '登录',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
              store.dispatch('user/resetToken').then(() => {
              location.reload()
            }) 
          })
      }
      return Promise.reject(new Error(res.message || 'Error'))
    } else {
      return res 
    }
  },
  error => {
    console.log('err' + error) // for debug
    Message({
      message: error.message,
      type: 'error',
      duration: 5 * 1000
    })
    return Promise.reject(error)
  }
)

//请求方法 
const http = {
  //post请求
  post(url, params) {
    return service.post(url, params, {
      transformRequest: [(params) => {
        return JSON.stringify(params)
      }],
      headers: {
        'Content-Type': 'application/json'
      }
    }) 
  },

  //put请求
  put(url, params) {
    return service.put(url, params, {
      transformRequest: [(params) => {
        return JSON.stringify(params)
      }],
      headers: {
        'Content-Type': 'application/json'
      }
    }) 
  },

  //get请求
  get(url, params) {
    return service.get(url, {
      params: params,
      paramsSerializer: (params) => {
        return qs.stringify(params)
      } 
    })
  },
  
  //restful风格的get请求
  getRestApi(url, params) {
    let _params
    if (Object.is(params, undefined || null)) {
      _params = ''
    } else {
      _params = '/'
      for (const key in params) {
        console.log(key)
        console.log(params[key])
        if (params.hasOwnProperty(key) && params[key] !== null && params[key]!== '') {
          _params += `${params[key]}/`
        } 
      }
      _params = _params.substr(0, _params.length - 1)
    }
    console.log(_params)
    if (_params) {
      return service.get(`${url}${_params}`)
    } else {
      return service.get(url)
    }
  },
  
  //删除请求
  delete(url, params) {
    let _params
    if (Object.is(params, undefined || null)) {
      _params = ''
    } else {
      _params = '/'
      for (const key in params) {
        if (params.hasOwnProperty(key) && params[key] !== null && params[key]!== '') {
          _params += `${params[key]}/`
        }
      }
      _params = _params.substr(0, _params.length - 1)
    }
    if (_params) {
      return service.delete(`${url}${_params}`).catch(err => {
        message.error(err.msg)
        return Promise.reject(err)
      })
    } else {
      return service.delete(url).catch(err => {
        message.error(err.msg)
        return Promise.reject(err)
      })
    } 
  },

  //文件上传的请求
  upload(url, params) {
    return service.post(url, params, {
      headers: {
        'Content-Type': 'multipart/form-data'
    }
    }) 
  },

  //登录请求
  login(url, params) {
    return service.post(url, params, {
      transformRequest: [(params) => {
        return qs.stringify(params)
      }],
      headers: {
        'Content-Type': 'application/x-www-form-urlencoded'
      }
    }) 
  }
}
export default http

修改.env.development和.env.production请求地址

VUE_APP_BASE_API = 'http://localhost:9999/'

2.2.9 退出登录

封装提示框

首先在util文件夹下写入组件

main.js 全局注册

然后就可以使用了

let confirm = await this.$extConfirm("确定要退出系统吗?");

//导入封装信息确认提示框组件脚本
import extConfirm from '@/utils/extConfirm' 
Vue.prototype.$extConfirm = extConfirm;

import { MessageBox, Message } from 'element-ui' 
//删除弹框
export default function extConfirm(text) {
  return new Promise((resolve, reject) => { 
    MessageBox.confirm(text, '系统提示', {
      cancelButtonText: '取消', 
      confirmButtonText: '确定', 
      type: 'warning'
    }).then(() => {
      resolve(true)
    }).catch(() => {
      reject(false)
    })
  }).catch(()=>{
  
  }) 
}

vue-element-admin 使用记录