Vue log工具类使用

1.简介

该文记录了vue中日志工具的使用,全局使用,生产环境隐藏log日志

2.使用

/**
 * 描述:日志帮助工具
 * @ClassName log
 * @Author apple
 * @Date 2019-04-20 21:12
 * @Version 1.0
 */

// 应用发布时为true,开发阶段为false
// 很轻松的取消日志
let isBuild = false;

const  Log = (Vue) => {
    Vue.prototype.$log = new Vue({
	    methods:{
	      // 强烈日志...
	    	e(...params){
	    	  if (!isBuild) {
			      console.log('❌···',...params,'···❌');
		      }
	    	},

				// 普通日志...
		    d(...params){
			    if (!isBuild) {
				    console.log(...params);
			    }
		    },
	    }
    });
};

export default Log;

main.js引入

import Log from './common/./common/helper/log'
Vue.use(Log);

组件运用

this.$log.e('节点1','信息');
this.$log.d('节点2','内容');

❌··· 节点1 信息 ···❌
节点2 内容

3. 局限性

该种方式放在js文件中并无作用,因为其是绑定在Vue对象上的。
也就是说在普通的js文件中不能使用该种方式。

你可能感兴趣的:(前端基础)