让控制台日志变得更美丽🎨，简单一行代码搞定！✨

📐 实现原理

• 通过Console自带属性完成

🚄 实现

• 考虑到后面这个东西会常用，因此我这里通过封装成独立一个插件，并发布到 NPMJS。
• 插件名称：beautify-console-logs
• 插件安装：npm i beautify-console-logs

效果预览

调用示例

// main.js
import {beautifyConsoleLogs, setProductionMode} from 'beautify-console-logs'
// 默认开发模式，可通过setProductionMode(true)设置成生产模式
setProductionMode(true)
// 插件注入
Vue.prototype.$Log = beautifyConsoleLogs()

// 对应页面中调用
// 示例
const tableData = [
    {
      name: '张三',
      age: 18,
      sex: '男',
      hobby: '篮球',
      address: '广东深圳',
      phone: '13456789012'
    },
    {
      name: '张三',
      age: 18,
      sex: '男',
      hobby: '篮球',
      address: '广东深圳',
      phone: '13456789012'
    },
    {
      name: '张三',
      age: 18,
      sex: '男',
      hobby: '篮球',
      address: '广东深圳',
      phone: '13456789012'
    },
  ]

// 调用方法
  this.$Log.info('hello world');
  this.$Log.warning('hello world');
  this.$Log.success('hello world');
  this.$Log.error('hello world');
// 传入多个参数
  this.$Log.info('张三',123);
  this.$Log.warning('张三',123);
  this.$Log.success('张三',123);
  this.$Log.error('张三',123);
  this.$Log.table(tableData);
  this.$Log.info('数组对象',tableData);

  // 传入图片地址要直接能访问的，不然会跨域 可以传两个参数，第一个是图片地址，第二个是图片放大多少倍，默认是1
  this.$Log.picture('你的图片地址');