Vue.jsでSPAサイトを作成するチュートリアル【3. コンポーネント編】

Vue.jsを使い始めていろいろできることが多くなってきたので、整理する意味も兼ねてチュートリアルにまとめます。
今回はコーポレートサイトを想定して作成していきます。
※記事が長くなったのでチュートリアルを分割しました。

目次

• 表示編
• ルーター編
• コンポーネント編 ←イマココ
• CSS編
• JS編
• ライブラリ編
• メタ編
• ビルド編

前提

• タスクはnpm scriptsで一限管理
• コマンドはyarnを使用
• vue-cliのwebpack-simpleを使用

バージョン

• "vue": "^2.5.11"
• "webpack": "^3.6.0"

ヘッダーの作成

Default.vueのp headerとrouter-link部分をヘッダーとしてコンポーネント化しましょう。
以下のディレクトリ構成で作成していきます。

/src
  /components
    /TheHeader
      TheHeader.vue
      TheHeader.pug
      TheHeader.scss
      TheHeader.js
  /css
  /img
  /layouts
  /pages
  省略

/src/components/TheHeader.vue

<template
  lang="pug"
  src="./TheHeader.pug"
/>

<script src="./TheHeader.js" />

<style
  lang="scss"
  src="./TheHeader.scss"
  scoped
/>

router-linkはrouter.jsで指定したnameを使うこともできます。

/src/components/TheHeader.pug

header#theHeader.theHeader
  p {{ text }}
  nav.theHeaderNav
    ul.theHeaderNavList
      li: router-link(:to="{ name: 'index' }") index
      li: router-link(:to="{ name: 'about' }") about
      li: router-link(:to="{ name: 'service' }") service
      li: router-link(:to="{ name: 'recruite' }") recruite
      li: router-link(:to="{ name: 'contact' }") contact

/src/components/TheHeader.scss

.theHeader {
}

/src/components/TheHeader.js

export default {
  data: function() {
    return {
      text: 'theHeader'
    }
  }
}

次にTheHeaderコンポーネントを/src/layouts/Default.vueで読み込ませます。

/src/layout/Default.vue

<template lang="pug">
.wrap
  the-header
  main#main.main: router-view
  p footer
</template>

<script>
import TheHeader from '../components/TheHeader/TheHeader.vue'

export default {
  components: {
    TheHeader
  }
}
</script>

表示確認をしてheaderテキストだったものがtheHeaderテキストに変更されていて、各リンクがリスト表示になっていれば成功です。

フッターの作成

ヘッダーと同じ要領でフッターも作成していきましょう。

/src
  /components
    /TheHeader
    /TheFooter
      TheFooter.vue
      TheFooter.pug
      TheFooter.scss
      TheFooter.js
  /css
  /img
  /layouts
  /pages
  省略

/src/components/TheFooter/TheFooter.vue

<template
  lang="pug"
  src="./TheFooter.pug"
/>

<script src="./TheFooter.js" />

<style
  lang="scss"
  src="./TheFooter.scss"
  scoped
/>

/src/components/TheFooter/TheFooter.pug

footer#theFooter.theFooter
  p.copyright © {{ copyright }}

/src/components/TheFooter/TheFooter.scss

.theFooter {
}

/src/components/TheFooter/TheFooter.js

export default {
  data: function() {
    return {
      copyright: '2018 vue skelton'
    }
  }
}

Default.vueにTheFooterを読み込ませましょう。

/src/layouts/Defaul.vue

<template lang="pug">
.wrap
  the-header
  main#main.main: router-view
  the-footer
</template>

<script>
import TheHeader from '../components/TheHeader/TheHeader.vue'
import TheFooter from '../components/TheFooter/TheFooter.vue'

export default {
  components: {
    TheHeader,
    TheFooter
  }
}
</script>

ブラウザで確認してコピーライトが表示されていれば成功です。

まとめ

コンポーネント化は、コンポーネントを作成し読み込ませたいところにscript内で読み込ませてtemplateに記述すると使用できます。
コンポーネントにするかどうかは都度検討する必要があります。
コンポーネント化しすぎるとファイルの行き来やデータの受け渡し等で混乱する可能性もあります。
ご利用は計画的に。