Edited at

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

More than 1 year has passed since last update.

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に記述すると使用できます。

コンポーネントにするかどうかは都度検討する必要があります。

コンポーネント化しすぎるとファイルの行き来やデータの受け渡し等で混乱する可能性もあります。

ご利用は計画的に。