【Vue.js】Vue CLIで共通テンプレートを作成する方法

Vue CLIで作成したページに共通ヘッダーや共通フッターを作成する方法。

作成手順

1. componentsフォルダ配下に単一コンポーネントファイルを作成
2. app.vueファイルで作成したコンポーネントを読み込み
3. export defualtでモジュール化
4. templateタグ内で呼び出し

以下、共通フッター(CommonFooter)コンポーネントを作成する場合で考える。

1. componentsフォルダ配下に単一コンポーネントファイルを作成

作成するコンポーネントは、componentsフォルダ内に作成し、各ページで呼び出す。

＜コンポーネント作成時の注意点＞

• ファイル名は、大文字始まり、キャメルケースとする。
  • 例： CommonFooter.vue
• ファイル内は、template, script, styleタグで構成する。
  • 単一ファイルコンポーネントと呼ぶ

＜補足：単一ファイルコンポーネントについて＞
文字通り、一つのファイルからなるパーツのことをいう。

従来のWEBページはhtml, css, jsファイルから成るが、Vue CLIの思想では、各パーツ（コンポーネント）毎にhtml, css, jsを管理する。

html部はtemplateタグで囲み、cssはstyleタグ、jsはscriptタグで囲む。

2. app.vueファイルで作成したコンポーネントを読み込み

全てのページで共通となる要素は「app.vue」ファイルに記載する。

まず初めに、作成したコンポーネント（CommonFooter）をapp.vueにインポートする。

scriptタグ内に以下を記述。

import CommonFooter from '@/components/CommonFooter'

export defualtでモジュール化

コンポーネントファイルを呼び出しただけでは使えない。templateタグ内で呼び出せるように、モジュール化する必要がある。

scriptタグ内のexports defaultで、componentsオプションを使用しインポートしたテンプレートを定義する。

import CommonFooter from '@/components/CommonFooter'

export default {
  components:{
    CommonFooter
  }
}

＜export defaultsについて＞
単一ファイルコンポーネントを使うためには、export defaultで囲む必要がある。

これをすることで、templateタグなど外部でそのコンポーネントが利用できるようになる。

呼び出し時にの名称としてテンプレート名を設定する。

4. templateタグ内で呼び出し

これまでで、作成したコンポーネントをtemplate内で呼び出し、画面に反映する準備が整った。

コンポーネントは呼び出したい箇所に<コンポーネント名/>を記述することで呼び出せる。

<コンポーネント名/>は<コンポーネント名></コンポーネント名>の省略形。どちらでも正常に動く。

<template> 

  <CommonFooter/>

</template>

以上。