[Vue.js] Vue 컴포넌트(component) 구조 및 스니펫(snippet)

- Vue 컴포넌트 기본 구조

<template>
  <div></div>
</template>
<script>
  export default {
    name: '', // 컴포넌트 이름
    components: {}, // 다른 컴포넌트 사용 시 컴포넌트 import, 배열로 저장
    data: { // html과 자바스크립트 코드에서 사용할 데이터 변수 선언
      return: {
        sampleData: ''
      }
    },
    setup() {}, // 컴포지션 API
    created() {}, // 컴포넌트가 생성되면 실행
    mounted() {}, // template에 정의된 html코드가 랜더링된 후 실행
    unmounted() {}, // unmount가 완료된 후 실행
    methods: { // 컴포넌트 내에서 사용할 메소드 정의

    }
  }
</script>

 

- VScode 스니펫 설정

File > Preferences > Configure User Snippet

\n : 개행

\t : 탭

{

    "Generate Basic Vue Code" : {

        "prefix": "vue-start",

        "body": [

            "<template></template>\n<script>\nexport default {\nname: '',\ncomponents: {},\ndata: {\nreturn {\nsampleData: ''\n}\n},\nsetup() {},\ncreated() {},\nmounted() {},\nunmounted() {},\nmethods: {\n\n}\n}\n</script>"

        ],

        "description": "Generate Basic Vue Code"

    }

}

 

- 스니펫 불러오기

.vue 파일에서 코드 작성시 자동완성