Vueでアプリレイアウトを作ろう! 準備編

Question

問題8：Vueでアプリレイアウトを作ろう! 準備編

これまで学んできたテクニックを使って
問題18~21でアプリケーションの一つの画面レイアウトをつくっていこう。
作ったプロジェクトのcomponents/の中に`Sidebar.vue`と`Main.vue`というファイルを作成し
見本のようなレイアウトを作ろう。

src配下のディレクトリは以下のような構成で作ろう。

src
├── App.vue
├── assets
│ └── /* 画像等 */
├── components
│ ├──　Main.vue
│ ├──　Sidebar.vue
└── main.js

あらかじめエディタに書くコード

                --- App.vue
<template>
  <div id="app">
    <sidebar></sidebar>
    <main></main>
  </div>
</template>
<script>
</script>
<style>
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  display: flex;
  min-height: 100vh;
}
</style>
¥Vue¥

                --- Main.vue
<template>
  <div class="main-container">
    <h1>Main.vue</h1>
  </div>
</template>
<style>
  .main-container {
    width: 80%;
    background: #ddd;
  }
  .main-container h1 {
    padding-top: 50px;
  }
</style>
¥Vue¥

                --- Sidebar.vue
<template>
  <div class="sidebar-container">
    <h1>Sidebar.vue</h1>
  </div>
</template>
<style>
  .sidebar-container {
    width: 20%;
    background: #fff;
  }
  .sidebar-container h1 {
    padding-top: 50px;
  }
</style>
¥Vue¥

Answer 1

解答ソースコード

              --- App.vue
<script>
import Sidebar from '@/components/Sidebar.vue'
import Main from '@/components/Main.vue'
export default {
  name: 'App',
  components: {
    Sidebar,
    Main
  }
}
</script>
¥Vue¥

Vueでアプリレイアウトを作ろう! 準備編

問題8：Vueでアプリレイアウトを作ろう! 準備編

あらかじめエディタに書くコード

期待する画面

解答ソースコード

解説