Visual Studio Code로 Vue.js + TypeScript 개발환경 구성

.NET 개발자의 Vue.js + TypeScript 도전기 시리즈를 시작합니다. 본 시리즈는 최대한 짧은 주제로 꾸준히 글을 올리는 것을 목표로 합니다.

저는 .NET 개발자로 Vue.js의 경험은 전무하며 TypeScript 언어는 스터디 수준으로 알고 있으며, Visual Studio Code로 개발 환경을 구축하는데 경험이 부족합니다. 본 글은 저와 비슷한 위치에 있는 분 또는 초급 개발자가 Visual Studio Code에서 Vue.js + TypeScript 구성으로 개발을 시작할 수 있도록 기록합니다.

Vue.js란?

Vue.js(간단히 Vue /vjuː/, 뷰)는 웹 애플리케이션 사용자 인터페이스를 만들기 위한 오픈소스로 프로그레시브 자바스크립트 프레임워크입니다. Vue.js 3부터 TypeScript에 대한 지원이 강화되었습니다. 다른 라이브러리와의 결합이 용이하며 점진적으로 적용할 수도 있다고 합니다. SPA(Single Page Application) 앱을 구축하는데 사용할 수 있습니다.

컴포넌트로 화면 단위를 구성할 수 있으며 컴포넌트가 잘 구축이 되었다면 복잡한 화면도 수정 시 일관성을 가지게 됩니다. (예: A페이지에서는 수정되었는데 B페이지에서는 수정되지 않는 문제 없음)

기본적인 Vue.js의 컴포넌트 구성은 다음과 같습니다. 스크립트와 템플릿, 스타일이 하나의 컴포넌트로 구성됩니다.

<script setup lang="ts">
defineProps<{
  msg: string
}>()
</script>

<template>
  <div class="greetings">
    <h1 class="green">{{ msg }}</h1>
    <h3>
      You’ve successfully created a project with
      <a href="https://vitejs.dev/" target="_blank" rel="noopener">Vite</a> +
      <a href="https://vuejs.org/" target="_blank" rel="noopener">Vue 3</a>. What's next?
    </h3>
  </div>
</template>

<style scoped>
h1 {
  font-weight: 500;
  font-size: 2.6rem;
  position: relative;
  top: -10px;
}

h3 {
  font-size: 1.2rem;
}

.greetings h1,
.greetings h3 {
  text-align: center;
}

@media (min-width: 1024px) {
  .greetings h1,
  .greetings h3 {
    text-align: left;
  }
}
</style>

Vue.js + TypeScript 프로젝트 생성

npm 설치

npm은 JavaScript 언어를 위한 패키지 관리자입니다. node.js를 설치하면 npm을 사용할 수 있게 됩니다.

create-vue를 이용한 프로젝트 생성

create-vue를 이용해 쉽게 Vue.js + TypeScript 프로젝트를 생성할 수있습니다. 다음의 명령을 사용합니다.

npm create vue@latest

이후 프로젝트명 등 각종 설정을 비활성/활성화 할 수 있습니다. 이 때 Add TypeScript를 선택해서 TypeScript용으로 프로젝트를 구성할 수 있습니다.

이후 npm install 및 npm run format, npm run dev를 통해 생성된 프로젝트를 실행해 볼 수 있습니다.

npm run dev로 실행된 로컬 주소 http://localhost:5173/을 통해 다음의 실행 화면을 확인할 수 있습니다.

Visual Studio Code 개발 환경 구성

Visual Studio Code를 설치 했다면 프로젝트 디렉토리에서 code .를 통해 Visual Studio Code에 진입할 수 있습니다.

PS W:\Learnings\vue-learning\vue-test> code .

개발에 필요한 개개의 확장을 별도로 설치해도 되지만 Visual Studio Code에서 필요로 하는 확장을 안내해주는 것을 설치해도 됩니다. package.json을 선택했을 때 다음의 권장 패키지를 설치할 수 있습니다.

이후 Visual Studio Code에서 Vue.js + TypeScript 개발을 진행할 수 있습니다.