Vue.js) global(전역) 함수 만들어서 콘솔 로고 사용하기

개발중에 console.log를 사용했던것 들을 개발이 끝난뒤 일일히 지우기가 매우 번거로워 처음부터 전역 함수로 만들어서 사용하기로 하였습니다.

생성 방벙에 대해 적어보겠습니다.

- 개발환경 (vue 3.0 with vue@Cli)

1.  js 파일을 생성(파일명은 자유로이)

const methods = {
    console_log(str){
        console.log(str)
    }
}


export default {
    install(Vue) {
        Vue.config.globalProperties.$log = methods.console_log;
    }
}

2. main.js 파일에서 생성한 파일 글로벌 선언하기

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import VueCookies from "vue-cookies"
import globalMethods from "./globalMethods"//생성한 파일


createApp(App)
    .use(VueCookies)
    .use(globalMethods)//생성한 파일
    .use(router)
    .mount("#app")

3. 함수 사용 (일반 .vue파일에서)(vue 확장자 파일 코드 구조는 아시죠??)

methods:{
  loginBtn(){
        this.$log('로그인 버튼 클릭')
      }
}

 

도움 되셨다면 하단의 광고 버튼 한번 클릭 부탁드립니다 :)