📐 实现原理
- 通过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('你的图片地址');






