vue ファイルとページの作成
Nuxt.js のセットアップが完了したら実際のコーディングを進めていきましょう。
Nuxt.jsで利用するvueファイルの利用方法を確認して、 Nuxt.jsでの基本のファイル編集操作やページの追加手順をマスタしましょう。
# vueファイルの活用
セットアップされたNuxt.jsのプロジェクトでは、
pages や layout などのフォルダに拡張子が .vue のファイルが用意されています。
この拡張子が .vue のファイルはVue.jsの基本のファイル形式となっており、
vueファイル、Vueコンポーネントなどと呼ばれます。
vueファイルの中には、template script style の3つの要素が存在し、
それぞれHTML / JavaScript / CSSを1つのファイルで記述できるようになっています。
画面のコーディングを行う場合は、 template要素の中にHTMLを記述していけばOKです。
今回は、サンプルサイト
の模写を行うため、 pages/index.vue を以下のような形で書き換えます。
<template>
<div>
<nav class="navbar navbar-expand-lg navbar-light fixed-top" id="mainNav">
<div class="container">
<a class="navbar-brand" href="/">Start Bootstrap</a>
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
Menu
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="/">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/about">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/post">Sample Post</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- Page Header -->
<header class="masthead" style="background-image: url('https://blackrockdigital.github.io/startbootstrap-clean-blog/img/home-bg.jpg')">
<div class="overlay"></div>
<div class="container">
<div class="row">
<div class="col-lg-8 col-md-10 mx-auto">
<div class="site-heading">
<h1>Clean Blog</h1>
<span class="subheading">A Blog Theme by Start Bootstrap</span>
</div>
</div>
</div>
</div>
</header>
<!-- Main Content -->
<div class="container">
<div class="row">
<div class="col-lg-8 col-md-10 mx-auto">
<div class="post-preview">
<a href="post.html">
<h2 class="post-title">
Man must explore, and this is exploration at its greatest
</h2>
<h3 class="post-subtitle">
Problems look mighty small from 150 miles up
</h3>
</a>
<p class="post-meta">Posted by
<a href="#">Start Bootstrap</a>
on September 24, 2019</p>
</div>
<hr>
<div class="post-preview">
<a href="post.html">
<h2 class="post-title">
I believe every human has a finite number of heartbeats. I don't intend to waste any of mine.
</h2>
</a>
<p class="post-meta">Posted by
<a href="#">Start Bootstrap</a>
on September 18, 2019</p>
</div>
</div>
</div>
</div>
<hr>
<!-- Footer -->
<footer>
<div class="container">
<div class="row">
<div class="col-lg-8 col-md-10 mx-auto">
<p class="copyright text-muted">Copyright © Your Website 2019</p>
</div>
</div>
</div>
</footer>
</div>
</template>
<script>
export default {
}
</script>
<style>
a {
color: #212529;
transition: all 0.2s;
}
#mainNav {
position: absolute;
border-bottom: 1px solid #e9ecef;
background-color: white;
font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
header.masthead {
margin-bottom: 50px;
background: no-repeat center center;
background-color: #868e96;
background-attachment: scroll;
position: relative;
background-size: cover;
text-align: center;
padding: 200px 0 150px;
color: white;
}
header.masthead .overlay {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
background-color: #212529;
opacity: 0.5;
}
footer {
padding: 50px 0 65px;
text-align: center;
}
</style>
vueファイルを利用してページを作成する場合、HTMLとCSSは同じファイル上で管理することが可能です。
なお、vueファイルのルールとして、templateタグの直下には、必ず1つのHTML要素しか記述できないという点には注意してください。 上記のようにhearderとdiv footerが必要な場合には、それらを1つのdiv要素等で囲う必要があります。
# ページの追加
トップページの大枠のコーディングが進んだら、 次はページの追加を行ってみましょう。
http://localhost:3000/about のURLでページを追加する場合、
pages/about.vue ファイルを以下のような形で作成します。
<template>
<div>
<nav class="navbar navbar-expand-lg navbar-light fixed-top" id="mainNav">
<div class="container">
<a class="navbar-brand" href="/">Start Bootstrap</a>
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
Menu
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="/">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/about">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/post">Sample Post</a>
</li>
</ul>
</div>
</div>
</nav>
<header class="masthead" style="background-image: url('https://blackrockdigital.github.io/startbootstrap-clean-blog/img/about-bg.jpg')">
<div class="overlay"></div>
<div class="container">
<div class="row">
<div class="col-lg-8 col-md-10 mx-auto">
<div class="page-heading">
<h1>About Me</h1>
<span class="subheading">This is what I do.</span>
</div>
</div>
</div>
</div>
</header>
<!-- Main Content -->
<div class="container">
<div class="row">
<div class="col-lg-8 col-md-10 mx-auto">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe nostrum ullam eveniet pariatur voluptates odit, fuga atque ea nobis sit soluta odio, adipisci quas excepturi maxime quae totam ducimus consectetur?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius praesentium recusandae illo eaque architecto error, repellendus iusto reprehenderit, doloribus, minus sunt. Numquam at quae voluptatum in officia voluptas voluptatibus, minus!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut consequuntur magnam, excepturi aliquid ex itaque esse est vero natus quae optio aperiam soluta voluptatibus corporis atque iste neque sit tempora!</p>
</div>
</div>
</div>
<hr>
<!-- Footer -->
<footer>
<div class="container">
<div class="row">
<div class="col-lg-8 col-md-10 mx-auto">
<p class="copyright text-muted">Copyright © Your Website 2019</p>
</div>
</div>
</div>
</footer>
</div>
</template>
<script>
export default {
}
</script>
<style>
a {
color: #212529;
transition: all 0.2s;
}
#mainNav {
position: absolute;
border-bottom: 1px solid #e9ecef;
background-color: white;
font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
header.masthead {
margin-bottom: 50px;
background: no-repeat center center;
background-color: #868e96;
background-attachment: scroll;
position: relative;
background-size: cover;
text-align: center;
padding: 200px 0 150px;
color: white;
}
header.masthead .overlay {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
background-color: #212529;
opacity: 0.5;
}
footer {
padding: 50px 0 65px;
text-align: center;
}
</style>
pagesフォルダに配置したvueファイルはそれぞれがページとして自動的に認識され、 ファイル名がそのままページのURLとなります。
例えば /post のURLでページを追加したい場合、
pages/post.vue を作成するか、pages/post/index.vue を作成することで、
/post で表示される画面のコーディングを行うことが可能です。
# Check!
次のステップに進む前に以下の内容をもう一度確認しておきましょう。
- vueファイルのtemplateとstyle要素を編集して、Webページのコーディングができることを確認しましょう。
- pagesフォルダにvueファイルを配置して、任意のURLでページが表示できることを確認してみましょう。