Vue3 + TypeScriptで、作成したコンポーネントを表示するまで

5433 ワード
Vue.js ty Vue3 Vue.js テキストリンク

はじめに

これは個人的なメモです。
Vue3 + TypeScriptのプロジェクトを作ったときのメモはこちら。

環境

$ vue -V
@vue/cli 4.5.9
$ my-project aiko$ node -v
v14.13.1
$ my-project aiko$ npm -v
6.14.8

やりたいこと

Header.vueというコンポーネントを、App.vueでimportして使いたい。

やったこと

Headerコンポーネントをつくる

<template>
  <h1>Header</h1>
</template>

<script lang="ts">
import { Options, Vue } from "vue-class-component";

@Options({
  props: {
    msg: String,
  },
})
export default class Header extends Vue {
  msg!: string;
}
</script>

<style scoped></style>>

とりあえずの表示ができれば良いので適当に。

App.vueにHeaderコンポーネントをimportする

<script lang="ts">
import { Options, Vue } from "vue-class-component";
import Header from "@/components/Header.vue";

@Options({
  components: {
    Header,
  },
})
export default class App extends Vue {}
</script>

scriptタグの中を書く。

Headerコンポーネントを使う

<template>
  <div id="header">
    <Header />
  </div>
  <div id="nav">
    <router-link to="/">Home</router-link> |
    <router-link to="/about">About</router-link>
  </div>
  <router-view />
</template>

これはjavascriptのときと同じだ。

おわり

できた。(Headerと表示された)