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

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

目次

前提

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

バージョン

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

ヘッダーの作成

Default.vueのp headerrouter-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 &copy; {{ 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に記述すると使用できます。
コンポーネントにするかどうかは都度検討する必要があります。
コンポーネント化しすぎるとファイルの行き来やデータの受け渡し等で混乱する可能性もあります。
ご利用は計画的に。

Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account log in.