Vueを利用してポートフォリオを作成してみる(2/3)

Vueを利用してポートフォリオを作成してみる(１/3)の続きです。
https://qiita.com/mf37459/items/fcf1e9167c62e39843d1

Vue.cliを利用して開発環境を設定するまでは、問題なく行うことができました。
次に作成されたフォルダ構成を使ってどのようにサイトを作成していくかで悩んだので備忘録。
(今回作成するポートフォリオはページ遷移のないものとします)

$Vue create [ディレクトリ名]で作成されるもの

以下のようなディレクトリが作成されました。

 - test
 　├ babel.config.js
 　├ node_modules
 　　∟ (...)
 　├ package.json
 　├ public
 　　∟ (...)
 　├ README.md
 　├ src
 　∟ yarn.lock

[各生成物のイメージは以下の通りです]
[babel.config.js]は新しいjavascript記法を古いjavascriptに変換するためのルールを記載したもの。
[node_modules]は使用するライブラリが色々入っている。
[package.json]はアプリ名やどのライブラリのどのバージョンをインストールしたかが記載されている。
[public]は、静的ファイルが置かれます。meta要素やfaviconの設定などはここで行なっているようです。
[README.md]は使い方とかの説明、元から各コマンドが記載されているし、自分で追記しても良い。
[yarn.lock]は各ライブラリのバージョンを固定する
[src]は、開発用ディレクトリでbuild前のソース群です。ページの内容をいじる際はこの中身をいじります。

というわけで内容をいじる際に必要なのは src となっています。今回のポートフォリオでは、srcの中身以外は触りませんでした。

srcディレクトリの中身

前記事の設定通りに作成した場合のディレクトリ構造は以下の通りです。

 - src
 　├ App.vue
 　├ assets
   　∟ logo.png
 　├ components
   　∟ HelloWorld.vue
 　∟ main.js

[各生成物のイメージは以下の通りです]
[App.vue]はVue単一コンポーネントファイル。どのコンポーネントをどの順番で表示するかが書かれている。Vue.Routerを使用するとページごとでどのコンポーネントを表示するか切り替えることができると思われますが、今回は１ページのみなので、ここを見ればどのコンポーネントをどの順番で使用しているのかがわかります。
[assets]はコンポーネントで呼び出す画像などを配置します。元から入っているlogo.pngはvueのロゴ画像です。
[components]は各コンポーネントが配置されています。コンポーネントは各UIを分割したものというイメージです。WEBサイトはこのコンポーネントの集合で作成されています。HelloWorld.vueはサンプルの文字部分が記載されており、App.vueでimport、表示されています。
[main.js]はアプリケーションの最初に読み込まれ実行されるjavascriptです。new VueによってApp.vueを起動しているようです。

中身をいじってみる

conponentsフォルダの中に新しく、TheBodyとTheHeaderというファイルを作成します。

 - src
 　├ App.vue
 　├ assets
   　∟ logo.png
 　├ components
    ├ TheBody.vue (*new)
    ├ TheHeader.vue (*new)
   　∟ HelloWorld.vue
 　∟ main.js

新たに配置した各ファイルは、パッと見てわかりやすいように以下の内容とします。

TheHeader.vue

<template>
  <div>
    <h1>this is HEADER</h1>
  </div>
</template>

<style scoped lang="scss">
div {
  border: 5px solid #42b983;
  border-radius: 5px;
  height: 10vh;
  margin-bottom: 10px;
  width: 80%;
}
</style>

TheBody.vue

<template>
  <div>
    <h1>this is Body</h1>
  </div>
</template>

<style scoped lang="scss">
div {
  border: 5px solid #42b983;
  border-radius: 5px;
  height: 80vh;
  width: 80%;
}
</style>

*cssでdivがかぶっていますが、styleの部分でscopedを設定しているので問題ないです。
*templateの直下には１要素しか置くことができません。下のように２要素置くとエラーとなります。

＜template＞
　　＜div＞...＜/div＞
　　＜div＞...＜/div＞
＜/template＞

次にこのコンポーネントをApp.vueに配置します。

App.vue

<template>
  <div id="app">
    <TheHeader/> // (*new)
    <TheBody/> // (*new)
  </div>
</template>

<script>
import TheBody from './components/TheBody.vue' // (*new)
import TheHeader from './components/TheHeader.vue'// (*new)

export default {
  name: 'app',
  components: {
    TheBody,// (*new)
    TheHeader// (*new)
  }
}
</script>

<style lang="scss">
# app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}
</style>

以上を行うと、下のような表示になります。