vue3 시작 -템플릿자동완성, import 자동완성

<template>
  <div>

  </div>
</template>

<script>
  export default {
    
  }
</script>

<style lang="scss" scoped>

</style>

 

vb 라고 입력하면 vbase로 한번에 템플릿을 만들 수 있다. 기존 vue2에서 vue를 치면 나온다고 했는데 안됐던 이유가 현재 내 버전은 vue3 였던 것!! 참고하자.

 

참고로 vue3는 컴포지션api를 사용하는데 모듈화로 해서 사용하면 store와 용도는 다르지만 비슷한 느낌인것 같다. 쓰임새는 각각 다르다고 한다.

1. 컴포지션 API:
   • 컴포지션 API는 Vue 3에서 새롭게 추가된 기능으로, 코드를 보다 모듈화하고 재사용 가능하게 만들어줍니다.
   • 컴포지션 API를 사용하면 로직을 관련된 부분끼리 묶어서 사용할 수 있습니다. 이는 더 작은 단위로 컴포넌트를 분리하고, 각 부분을 조합하여 필요한 로직을 만들어낼 수 있게 해줍니다.
   • 기존의 옵션 기반 API보다 유연하고 가독성이 좋습니다. 특히 대규모 애플리케이션에서 유용합니다.
2. 스토어:
   • 스토어는 Vue의 상태 관리 패턴 중 하나로, 애플리케이션의 상태를 중앙 집중화하여 관리하는 데 사용됩니다.
   • 대규모 애플리케이션에서 상태를 관리하고, 다양한 컴포넌트 간의 상태 공유와 통신을 용이하게 합니다.
   • Vuex와 같은 상태 관리 라이브러리를 사용하여 구현할 수 있습니다.

컴포지션 API는 컴포넌트 내에서 로직을 구성하고 재사용하는 데 중점을 두며, 스토어는 애플리케이션의 상태를 관리하고 중앙 집중화하는 데 사용됩니다.

참고로 컴포지션 api는 2에서도 있었으나 라이브러리였고 vue3에는 정식도입되었다. 하지만 사용하지 않아도 상관이 없다.

 

컴포지션은 재사용, 스토어는 애플리션 상태를 관리, 중앙 집중화를 하는데 사용한다.

 

vue2
<template>
  <div>

  </div>
</template>

...

vue3

<template>

</template>

 

vue2에서는 루트엘리먼트로써 div하나에 감싸야 했지만 vue3부터는 그 부분이 프라그멘트로 루트엘리먼트가 1개가 아닌 여러개가 될 수 있게 되었다. 프래그멘트는 리액트에도 나왔던 방식.. 태그로 사용 했었다.

 

vue3 부터는 2개 이상의 명사를 혼합해서 컴포넌트를 만들어야 한다. 그렇지 않으면 eslint 오류가 나오게 된다.

 

컴포넌트를 불러 올 때는 자동완성에서 tab을 누르면 자동으로 임폴트와 컴포넌트를 등록해준다. 볼라라는 플러그인 덕분이다.

import 단축키는 vim을 치고 자동완성을 하면되는데 디폴트 임폴트 모양을 만들어 준다.

 

vimport 자동완성

그런 다음 컴포넌트 명을 입력해주면 편하게 path까지 잡힌다.