【Vue.js】コンポーネントを実装する手順

はじめに

今回はVue.jsのコンポーネントについての記事になります！

細かい説明というよりは、実際に使うときの実装の手順を書いていけたらと思います。

はじめに
導入
実装①「コンポーネントの作成」
実装②「コンポーネントの登録・実装」
さいごに

導入

今回はVue CLIを用いて以下のコマンドより作った雛形を利用していきます。

$ vue init webpack test

実装①「コンポーネントの作成」

まずはコンポーネントを作成しましょう。src/components/の中にtest.vueを作成します。

・src/components/test.vue

<template>
    <h1>コンポーネントのテスト</h1>
</template>

実装②「コンポーネントの登録・実装」

先程作成したコンポーネントを実際に使ってみましょう。

・src/App.vue

<template>
  <div id="app">
    <!-- この testタグ が利用できるようになる -->
    <test></test>
  </div>
</template>

<script>
import test from './components/test'    //「src/components/test.vue」ファイルを読み込む

export default {
  name: 'App',
  components: {
    test                                // Vueインスタンスにコンポーネントを登録
  }
}
</script>