Vue CLIで新規プロジェクト作成と、よくある雛形の実装

この記事はサーバーレスWebアプリ Mosaicを開発して得た知見を振り返り定着させるためのハンズオン記事の1つです。

以下を見てからこの記事をみるといい感じです。

サーバーレスWebアプリを開発するためのCloud9環境構築

はじめに

Vue CLI 3でSPA(シングルページアプリケーション)の雛形を新規作成します。
UI用のフレームワークとして、マテリアルデザインのVuetifyを利用。
ヘッダー、フッター、いくつかのページへのルーティング、ハンバーガーメニューなどを実装します。

コンテンツ

GithubにWebアプリプロジェクト用のリポジトリを作成

リポジトリ名は sample_vue_project とします。
Vueのプロジェクト名と同じにしますので、大文字は使えません。

Cloud9にリポジトリをクローン

$ git clone https://github.com/{YourGithubID}/sample_vue_project.git

Vueプロジェクトの作成

以下のコマンドで新規プロジェクトを作成できます。

$ vue create sample_vue_project

プロジェクト作成が終わるとこんな感じになってると思います。

Vueプロジェクト実行
Cloud9でVueのプロジェクトを実行するために、プロジェクトディレクトリ直下に以下のファイルが必要です。

vue.config.js

module.exports = {
  "devServer": {
    host: '0.0.0.0',
    public: '0.0.0.0:8080',
    disableHostCheck: true
  }
}

~~(※理由は良く知りません、、。誰か教えて下さい。)~~
@NonbiriTarsan さんが情報を提供してくださいました。(2020.1.27)
---ここから---
こちらのサイトによりますと、上に書いた設定disableHostCheck:trueだと、根本的な解決ではないそうで、以下のような設定とするべきだそうです。

vue.config.js

module.exports = {
    devServer: {
        public: "${$C9_PID}.vfs.cloud9.${MY_REGION}.amazonaws.com"
    }
}

${MY_REGION}はいいと思いますが、${$C9_PID}が何か少し迷いました。
Cloud9の環境詳細にある、Environment ARN
arn:aws:cloud9:ap-northeast-1:123456789012:environment:xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
これの、xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxの部分がソレです。

なるほどなるほど、、、って、
前の設定と後の設定で、何がどう変わるのか、正直理解しきれていないのですが、そういう事みたいです。
---ここまで---

プロジェクトディレクトリで以下のコマンドにより、プロジェクトのビルドの後にサーバーが起動して、Webアプリにアクセスできるようになります。

$ npm run serve

ビルドが終わりサーバーが起動したら、上部メニューバーにある Preview > Preview Running Application からアクセスしてください。

こんな感じのVueのWelcome画面が表示されればOKです。
右上の方にある Pop Out Into New Window によりブラウザの別タブで開くことができ、またそうすることでデベロッパーツールも利用できるようになります。

起動したサーバーは、Ctrl+Cで停止できます。

Vuetifyの利用

プロジェクトディレクトリで以下のコマンドにより、Vuetifyをプロジェクトにインストールすることができます。

$ vue add vuetify
? Choose a preset: Default (recommended)

インストールできたら実行してみてください。デザインがVuetifyのものに変わっています。

いくつかのページとページ遷移のためのルーティング

ページ遷移のために、ルーティング制御プラグインVue Routerを利用します。
まずはインストールします。

$ npm install vue-router

必要な画面分、ViewとComponentのvueファイルを作成します。
ここではHomeとAboutの2画面作成し、また、お互いの画面を行き来できるようにしておきます。

以下のファイルを新規作成します。
src/views/Home.vue
src/views/About.vue
src/components/Home.vue
src/components/About.vue
src/router.js

最初からある以下のファイルは削除します。
src/components/HelloWorld.vue

ソースコードの更新

src/view/Home.vue

<template> 
  <Home /> 
</template> 
 
<script> 
  import Home from '../components/Home'  
  export default { 
    components: { 
      Home 
    } 
  } 
</script>

src/view/About.vue

<template> 
  <About /> 
</template> 
 
<script> 
  import About from '../components/About' 
  export default { 
    components: { 
      About 
    } 
  } 
</script>

src/components/Home.vue

<template>
  <v-container>
    <p>ホーム</p>
    <router-link to="about" >link to About</router-link>
  </v-container>
</template>

src/components/About.vue

<template>
  <v-container>
    <p>アバウト</p>
    <router-link to="/" >link to Home</router-link>
  </v-container>
</template>

src/router.js

import Vue from 'vue'; 
import Router from 'vue-router'; 
import Home from './views/Home.vue'; 
import About from './views/About.vue'; 
 
Vue.use(Router); 
 
export default new Router({ 
  routes: [ 
    { 
      path: '/', 
      name: 'home', 
      component: Home,
    }, 
    { 
      path: '/about', 
      name: 'about', 
      component: About, 
    }, 
  ] 
});

src/main.js

import Vue from 'vue'
import App from './App.vue'
import vuetify from './plugins/vuetify';
import router from './router';

Vue.config.productionTip = false

new Vue({
  vuetify,
  router, 
  render: h => h(App)
}).$mount('#app')

src/App.vue

<template>
  <v-app>
    <v-content>
      <router-view></router-view>
    </v-content>
  </v-app>
</template>

<script>
export default {
  name: 'App',
  components: {
  },
  data: () => ({
    //
  }),
};
</script>

(※JavaScript、Vue.js、Vuetifyの基本構文についてはここでは触れません。必要な場合はどこかで学んできてください。)

実行してみましょう。
お互いのページを行き来するだけのシンプルなSPAが実行できました。

ヘッダーとフッター

見た目が寂しいのでヘッダーとフッターを付けましょう。

src/App.vue

<template>
  <v-app>
    <v-app-bar app>
      <v-toolbar-title>
        Sample Vue Project
      </v-toolbar-title> 
    </v-app-bar>
    
    <v-content>
      <router-view></router-view>
    </v-content>

    <v-footer app>
      <v-card-title>
        <v-btn fab small class="mx-2" color="white" href="https://twitter.com/w2or3w" target="_blank">
          <v-icon>mdi-twitter</v-icon>
        </v-btn>
        <v-btn fab small class="mx-2" color="white" href="https://www.facebook.com/w2or3w" target="_blank">
          <v-icon>mdi-facebook</v-icon>
        </v-btn>
        <v-btn fab small class="mx-2" color="white" href="https://www.instagram.com/w2or3w" target="_blank">
          <v-icon>mdi-instagram</v-icon>
        </v-btn>
      </v-card-title>
      <v-card-text>
        <p>Copyright © Sample Vue Project</p>
      </v-card-text>
    </v-footer>
  </v-app>
</template>

<script>
export default {
  name: 'App',
  components: {
  },
  data: () => ({
    //
  }),
};
</script>

ヘッダー(v-app-bar)とフッター(v-footer)を加えました。

実行してみましょう。
ヘッダーとフッターが付いてそれっぽくなりましたね。
(※SNSリンクはワタシのものなので自分のものに変えてくださいね。(フォロー歓迎です。))

ハンバーガーメニュー

これも最近のサイトには良くありがちなハンバーガーメニューを付けてきましょう。

src/App.vue

<template>
  <v-app>
    <v-navigation-drawer app v-model="drawer">
      <v-list nav dense>
        <v-list-item-group>
          <v-list-item>
            <v-list-item-title @click="onHome">HOME</v-list-item-title>
          </v-list-item>
          <v-list-item>
            <v-list-item-title @click="onAbout">ABOUT</v-list-item-title>
          </v-list-item>
        </v-list-item-group>
      </v-list>
    </v-navigation-drawer>

    <v-app-bar app>
      <v-app-bar-nav-icon @click="drawer = !drawer"></v-app-bar-nav-icon>
      <v-toolbar-title>
        Sample Vue Project
      </v-toolbar-title> 
    </v-app-bar>

    <v-content>
      <router-view></router-view>
    </v-content>

    <v-footer app>
      <v-card-title>
        <v-btn fab small class="mx-2" color="white" href="https://twitter.com/w2or3w" target="_blank">
          <v-icon>mdi-twitter</v-icon>
        </v-btn>
        <v-btn fab small class="mx-2" color="white" href="https://www.facebook.com/w2or3w" target="_blank">
          <v-icon>mdi-facebook</v-icon>
        </v-btn>
        <v-btn fab small class="mx-2" color="white" href="https://www.instagram.com/w2or3w" target="_blank">
          <v-icon>mdi-instagram</v-icon>
        </v-btn>
      </v-card-title>
      <v-card-text>
        <p>Copyright © Sample Vue Project</p>
      </v-card-text>
    </v-footer>
    
  </v-app>
</template>

<script>
export default {
  name: 'App',
  components: {
  },
  data: () => ({
    drawer: false,
  }),
  methods:{
    onHome() {
      if(this.$route.path != '/'){
        this.$router.push({ path: '/' });
      }
    }, 
    
    onAbout() {
      if(this.$route.path != '/about'){
        this.$router.push({ path: 'about' });
      }
    }, 
  }
};
</script>

メニュー本体(v-navigation-drawer)と、v-app-barにアイコン(v-app-bar-nav-icon)を加えました。また、dataにdrawerフラグも追加しています。

実行してみましょう。
ハンバーガーメニューが付きましたね。

あとがき

ここで作成したプロジェクトはGitHubの以下に置いておきますね。
https://github.com/ww2or3ww/sample_vue_project/tree/work1

UIデザイン(見た目)ってすごく大事だと思うのですが、実装するにあたってすごく面倒だし消耗させられる部分でもあります。
CSS完全に理解したTシャツがバズってましたが、そういう事ですよね。

VuetifyやBulmaのようなUIフレームワークを利用することで、UIデザインにあまり消耗せず、デフォルトでそれっぽく仕上げることができますのでとても助かります。
ワタシはGoogleが好きなので、Googleが推しているMaterial Designを継承しているVuetifyを選びました。

このハンズオン記事では、極力CSSは書かない方針でいきたいと思いますのでよろしくお願いします。

とはいえ、思い入れをもってアプリを作ろうとしたときにデザインは避けて通れません。UIフレームワークを利用した上で、こだわりという名の微調整をCSSでチマチマとする羽目になるでしょう。

最後に、デザインのために役立つサイトを置いておきますね。
配色に悩んだららここを参照すべし。
アイコンはここで探しています。
マテリアルデザインのホームは、見てるだけで楽しいです。