Vue - 2.기본 설정

Vue의 폴더

Vue의 폴더 명은 2개 이상의 단어가 이루어져야 한다.

Vue import 오류

Vue를 Typescript를 통해서 만들었을 경우 Vue 파일을 인지하지 못하는 오류가 발생한다. 해결 방법으로는

src 폴더 내부에 vue-shim-d.ts 파일을 만든 후

declare module '*.vue' {
  import Vue from 'vue';
  export default Vue;
}

를 적어준다

Vue script

Vue3에는 새로운 기능이 추가되었다 바로 <script setup lang="ts"> 이다. 이것과 비교되는 것은 <script> 이다. 둘의 차이점을 알아보자면

<script>

• 전통적인 Vue 컴포넌트 정의 방식이다.
• export default 구문을 사용하여 컴포넌트를 정의한다
• data, methods, computed, watch, components, props 등의 옵션을 명시적으로 설정한다.

<script>
export default {
  data() {
    return {
      message: '흠냐'
    }
  }
}
</script>

<script setup lang="ts">

• Vue 3에서 도입된 새로운 방식이다.
• 컴포넌트의 setup 함수를 자동으로 설정해준다.
• 코드가 간결해지고, 직접적으로 ref, reactive, computed, watch 등을 사용할 수 있다.
• TypeScript와 더 자연스럽게 통합된다.

<script setup lang="ts">
import { ref } from 'vue';

const message = ref('흠냐');
</script>

Vue-3 Snippets

이 확장 라이브러리를 사용하면 vuein 명령어를 통해 자동으로 vue의 구조를 만들어준다. 하지만 나는 몇가지 문제점을 발견했다.

1. <script> 보다 <template> 가 위에 있다.
2. <script setup lang="ts"> 로 자동 완성이 되지 않는다.

보통 script가 위에 오는게 좋다 하였고 setup을 사용하려 했기 때문에 나는 snippets를 만들었다.

1. Ctrl+Shift+P
2. Configure User Snippets -> vue

vue.json

{
	"Vue 3 Script Setup": {
		"prefix": "vuesetup",
		"body": [
		"<script setup lang=\"ts\">",
		"",
		"</script>",
		"",
		"<template>",
		"  <div>",
		"    {{ message }}",
		"  </div>",
		"</template>",
		"",
		"<style scoped>",
		"</style>"
		],
		"description": "Vue 3 Script Setup with TypeScript"
	}
	  
}

파일 구조 사용할꺼
출처 - https://velog.io/@seulgea/Vue-%ED%8F%B4%EB%8D%94-%EA%B5%AC%EC%A1%B0