搭建vue后台管理项目

目录

1、全局统一控制台输出语句

1、全局统一控制台输出语句

新建 /system/log/index.js

/**
 * @description 控制台样式打印
 * @author zhenghaozhe
 */
const log = (text, type) => {
  let style;
  switch (type) {
    case 'primary':
      style = 'background: #409eff; color: #fff; padding: 2px 5px; border-radius: 2px';
      break;
    case 'success':
      style = 'background: #85ce61; color: #fff; padding: 2px 5px';
      break;
    case 'info':
      style = 'background: #909399; color: #fff; padding: 2px 5px';
      break;
    case 'warning':
      style = 'background: #e6a23c; color: #fff; padding: 2px 5px';
      break;
    case 'danger':
      style = 'background: #f56c6c; color: #fff; padding: 2px 5px';
      break;
    default:
      style = ''
      break;
  }
  console.log('%c' + text, style)
}

export {
  log
}

在main.js中引入，挂载到vue原型中

import { log } from '@/system/log/index.js'

Vue.prototype.$log = log

在组件中使用

this.$log(2202)
this.$log(2202, 'success')