こんにちは！セミマサです。
前から気になっていたJavaScriptフレームワーク「Vue.js」を実際に使ってみました！
この記事では開発環境や今回の作業の流れについてご紹介したいと思います。
開発環境
今回の開発環境は下記になります。
- node.js 10.15.0
- npm 4.0.5
- vue-cli 3.5.0
エディタはVisual Studio Codeです。「Vetur」という拡張機能を導入しました。
使ったコマンド
備忘録として今回使ったコマンドを載せておきます！
プロジェクトを作る
vue create プロジェクト名テストサーバの実行
npm run serveテストサーバはctrl+cで停止できる。
ビルド
npm run build作業の流れ
まずは写経
下記サイトに沿ってベースとなる時計部分を作りました。解説が丁寧でわかりやすかったです。
コンポーネントを作ってみる
写経だけでは「やった感」があまり湧かないので、ヘッダーとフッターをコンポーネントとして作ってみました。ソースはそれぞれ下記になります。
ヘッダーのソース
<script>
export default {
}
</script>
<template>
<header id="header">
<h1 class="heading">ヘッダー</h1>
<nav class="head-nav">
<ul class="head-list">
<li class="head-list-item"><a href="#header" class="head-list-link">TOP</a></li>
<li class="head-list-item"><a href="#uk" class="head-list-link">UK</a></li>
<li class="head-list-item"><a href="#sy" class="head-list-link">SY</a></li>
<li class="head-list-item"><a href="#jo" class="head-list-link">JO</a></li>
</ul>
</nav>
</header>
</template>
<style scoped>
ul{
list-style: none;
}
a:link,a:visited,a:hover,a:active{
color: white;
text-decoration: none;
}
#header{
display: flex;
justify-content: space-between;
align-items: center;
flex-direction: row;
padding: 30px 10%;
background-color: #3a4a5e;
}
.heading{
color: white;
font-size: 2.4rem;
width:40%;
}
.head-nav{
width: 60%;
}
.head-list{
display: flex;
flex-direction: row;
justify-content: space-around;
align-items: center;
width: 100%;
}
.head-list-item{
width: 25%;
font-size: 1.4rem;
color: white;
}
.head-list-link{
display: block;
text-align: center;
transition: all .5s;
}
.head-list-link:hover{
background-color: rgba(255,255,255, .5)
}
</style>
フッターのソース
<script>
export default {
}
</script>
<template>
<footer>
<p class="footer-text">フッター</p>
</footer>
</template>
<style scoped>
footer{
padding: 30px 10%;
display: flex;
justify-content: center;
align-items: center;
background-color:#3a4a5e;
}
.footer-text{
text-align: center;
font-size: 2.4rem;
color: white;
}
</style>作ったヘッダーとフッターを読み込む
ヘッダーとフッターをApp.vueで読み込みます。App.vueの現時点でのソースは下記になります。
<template>
<div>
<Header></Header>
<Clock class="clock" location="Tokyo" :diff="0"/>
<Clock class="clock" id="ny" location="NY" :diff="-14"></Clock>
<Clock class="clock" id="la" location="LA" :diff="-17"></Clock>
<Clock class="clock" id="uk" location="UK" :diff="-9"></Clock>
<Clock class="clock" id="br" location="BRAZIL" :diff="-12"></Clock>
<Clock class="clock" id="sy" location="SYDNEY" :diff="1"></Clock>
<Clock class="clock" id="du" location="DUBAI" :diff="-5"></Clock>
<Clock class="clock" id="jo" location="JOHANNESBURG" :diff="-7"></Clock>
<Footer></Footer>
</div>
</template>
<script>
import Clock from "@/components/Clock"
import Header from "@/components/Header"
import Footer from "@/components/Footer"
export default{
components:{
Header,Clock,Footer,
},
}
</script>
<style scoped>
.clock{
width: 80%;
max-width: 500px;
margin:30px auto;
}
</style>
<style>
html{
font-size: 62.5%;
}
body{
margin: 0;
}
p{
margin: 0;
}
</style>
ビルドしてサーバに上げる
ビルドしたものをサーバ上にアップロードしたところ、404エラーが出てしまいました。エラーを確認したところcssやjsを読み込めていないようです。
下層フォルダにアップロードする場合は設定ファイルで指定する必要がある
Vue-CLIのドキュメントいわく、設定ファイルがない場合ドメイン直下に置くことを想定したビルドがされるようです。
そこでpackage.jsonと同一階層に設定ファイルとなるvue-config.jsを作成します。今回は「Clock」というフォルダにアップロードしたいので下のように書きました。
module.exports = {
publicPath: '/Clock/',
}設定ファイルを用意した後、再ビルドしてアップロードしたところ無事に動作が確認できました。
制作物
今回の制作物はこちらになります。
clock-app
semimasa.com
おわりに
現時点ではまだまだVue.jsの魅力を引き出せておりません。次はWebサイトを作る際によく見かける要素を実装してみたいと思います。
