Vue.jsを試してみた

こんにちは！セミマサです。

前から気になっていたJavaScriptフレームワーク「Vue.js」を実際に使ってみました！

この記事では開発環境や今回の作業の流れについてご紹介したいと思います。

開発環境
使ったコマンド
作業の流れ
制作物
おわりに

開発環境

今回の開発環境は下記になります。

node.js 10.15.0
npm 4.0.5
vue-cli 3.5.0

エディタはVisual Studio Codeです。「Vetur」という拡張機能を導入しました。

使ったコマンド

備忘録として今回使ったコマンドを載せておきます！

プロジェクトを作る

vue create プロジェクト名

1	vue create プロジェクト名

テストサーバの実行

npm run serve

1	npm run serve

テストサーバはctrl+cで停止できる。

ビルド

npm run build

1	npm run build

作業の流れ

まずは写経

下記サイトに沿ってベースとなる時計部分を作りました。解説が丁寧でわかりやすかったです。

外部サイト

第一回 Vue.jsでWebアプリをつくろう！ | MONSTER DIVE

Vue.jsにハマるエンジニアのWEBアプリ開発連載

コンポーネントを作ってみる

写経だけでは「やった感」があまり湧かないので、ヘッダーとフッターをコンポーネントとして作ってみました。ソースはそれぞれ下記になります。

ヘッダーのソース

<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>

export default {

}

</script>

</ul>

</nav>

</header>

</template>

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>

export default {

}

</script>

</footer>

</template>

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>

<div>

</div>

</template>

import Clock from "@/components/Clock"

import Header from "@/components/Header"

import Footer from "@/components/Footer"

export default{

components:{

Header,Clock,Footer,

}

</script>

.clock{

width: 80%;

max-width: 500px;

margin:30px auto;

}

</style>

<style>

html{

font-size: 62.5%;

}

body{

margin: 0;

}

margin: 0;

}

</style>

ビルドしてサーバに上げる

ビルドしたものをサーバ上にアップロードしたところ、404エラーが出てしまいました。エラーを確認したところcssやjsを読み込めていないようです。

下層フォルダにアップロードする場合は設定ファイルで指定する必要がある

Vue-CLIのドキュメントいわく、設定ファイルがない場合ドメイン直下に置くことを想定したビルドがされるようです。

そこでpackage.jsonと同一階層に設定ファイルとなるvue-config.jsを作成します。今回は「Clock」というフォルダにアップロードしたいので下のように書きました。

module.exports = {
    publicPath: '/Clock/',
}

module.exports = {

publicPath: '/Clock/',

}

設定ファイルを用意した後、再ビルドしてアップロードしたところ無事に動作が確認できました。

制作物

今回の制作物はこちらになります。

clock-app

おわりに

現時点ではまだまだVue.jsの魅力を引き出せておりません。次はWebサイトを作る際によく見かける要素を実装してみたいと思います。