typescript를 사용한 Vue3 프로젝트 환경 만들기

npm install --global @vue/cli

vue create my-project-name

구조

 

가장 기본적인 예제부터 보기 위해 HelloWorld.vue 삭제.

 

App.vue 코드를 다음과 같이 변경한다.

<template>
  <h1>안녕하세요. 최상위 components인 App.vue 입니다.</h1>
</template>

<script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({
  name: "App",
});
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>​

저장 후 8080에 접속

 

 

Components

이제 Home이란 component를 만들어보자. components 폴더 안에 Home.vue 파일을 만든 후 코드 작성

//Home.vue

<template>
  <h1>메인 Home 페이지입니다.</h1>
</template>

<script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({
  name: "Home",
  mounted() {
    console.log("in home");
  },
});
</script>

<style>
</style>
 

//App.vue

<template>
  <h1>안녕하세요. 최상위 components인 App.vue 입니다.</h1>
  <Home />
</template>

<script lang="ts">
import { defineComponent } from "vue";
import Home from "./components/Home.vue";

export default defineComponent({
  name: "App",
  components: {
    Home,
  },
});
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

이렇게 최상의 App.vue 안에서  Home.vue가 보일 수 있게 만든다. 

다시 8080에 접속하면

 

다음과 같이 App.vue 아래에 Home.vue가 생성된 것을 볼 수 있다.