単一ファイルコンポーネントとは

コンポーネントごとにファイルを分割したもの
適度に分割して書く為、再利用しやすくコンポーネントの改修も容易になる
1つのファイルにテンプレート、javascript、cssを記載する事ができる

単一ファイルコンポーネントの作成

VueCLIを使って作成する場合は、src/components内に.vueという形式で作成する。
中身は下記のように記載できる。<template>だけ必要であれば、<script>や<style>はなくても動く。

<template>
  
</template>

<script></script>

<style scoped>

</style>

<style scoped>とは記載されたCSSはコンポーネントでのみ適用されるよって意味ちなみに<style scoped lang="scss">のように記載するとscss形式での記載が可能になる。

作成したコンポーネントを使用するには、src/views/Home.vueを変更する必要がある。

views配下のファイルもコンポーネントだが、この中ではページ表示を役割として持っている。
ページ内で使用するコンポーネントの場合はsrc直下に格納したほうがいい。

ここでは表示させるコンポーネントを一つにまとめる必要があるので、importで読みこんで、
export箇所のcomponentsでローカル登録する。

import モジュール名 from '@/components/コンポーネント名'

export default {
  name: 'Home',
  components: {
    モジュール名
  }
}

その後templateに<モジュール名/>と記載すると描画される