Vue-CLIにてコンポーネントを作成して読み込む方法についてご紹介します。

読者の想定と前提

• プロジェクト作成済み
• Vueについて取り組みたい、取り組み始めた方

コンポーネントの作成

src/componentsに新規でvueファイルを作成します。
今回は、Components.vueという名前にしていきます。

<template>
  <div>
    コンポーネント
  </div>
</template>

<script>
export default {};
</script>

コンポーネントを読み込み

src/views/home.vueに読み込んでいきましょう。
以下、全体像です。

<template>
  <div class="home">
      <Components />
  </div>
</template>

<script>
import Componentｓ from "@/components/Components";

export default {
  name: "Home",
  components: {
    Components,
  },
};
</script>

<style scoped>
</style>

作成したコンポーネントをインポートする。

import Componentｓ from "@/components/Components";

読み込んだらコンポーネントを登録する。

export default {
  name: "Home",
  components: {
    Components,
  },
};

最後にtemplate内に記述をして完了となります。

<template>
  <div class="home">
      <Components />
  </div>
</template>