
問題8:Vueでアプリレイアウトを作ろう! 準備編
これまで学んできたテクニックを使って
問題18~21でアプリケーションの一つの画面レイアウトをつくっていこう。
作ったプロジェクトのcomponents/の中に`Sidebar.vue`と`Main.vue`というファイルを作成し
見本のようなレイアウトを作ろう。
src配下のディレクトリは以下のような構成で作ろう。
src
├── App.vue
├── assets
│ └── /* 画像等 */
├── components
│ ├── Main.vue
│ ├── Sidebar.vue
└── main.js
問題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¥
期待する画面

実行結果はさっきと同じであることが条件だ。
解答ソースコード
--- App.vue
<script>
import Sidebar from '@/components/Sidebar.vue'
import Main from '@/components/Main.vue'
export default {
name: 'App',
components: {
Sidebar,
Main
}
}
</script>
¥Vue¥
完了にする!
活動記録をTweetする
今回作成したコードが次の問題でも使用していくからそのまま使ってほしい。