[Vue-CLI]ヘッダー・フッターなどの共通パーツを作る

2021-03-25

Vue-CLIを使ってヘッダー、フッターなどん共通パーツを作る方法をメモ。

共通のパーツを作る

WebサイトやSPAを作る時に共通のパーツを作っておくと便利な場合がある。

その場合はcomponents下に共通パーツを作ることができます。

まず、components配下に新しくHeader.vueやFooter.vueなどのファイルを作成する。

次にApp.vueに以下のように記述する。

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <Header/>
    <Footer/>
  </div>
</template>

<script>
import Header from './components/Header'
import Footer from './components/Footer'

export default {
  name: 'App',
  components: {
    Header,
    Footer
  }
}
</script>

<style>
// 省略
</style>

template側の呼び出しでは、そのまま<Header/>というように記載。

script部分ではimport Header fromのような形でcomponents配下のHeaderやFooterを読み込む。

importの部分はあくまで読み込みの宣言だけど、export defaultの部分では使用の宣言を行う。