Vue.jsプロジェクト開発を始める

はじめに

前回、Vue.jsプロジェクト開発を始める準備という記事を書きました。
こちらではプロジェクトの作成とブラウザでの実行確認を行いました。
今回はその続きです。

目標

• トップページをvue-cliクイックスタートのデフォルトから自作ページに変更する。
• ルーティング処理を実装する。

やったこと

公式から学ぶ

まずはVue.jsの公式ガイドを一通り読んでみました。

• ディレクティブ
• コンポーネント
• Vueインスタンス
• 算出プロパティ

など理解するための丁寧な解説が載っています。

しかし、今回実現したいルーティングの設定については

ほとんどのシングルページアプリケーション (SPA: single page application) を作成する場合、
公式にサポートされている vue-router ライブラリ を使うことをお勧めします。
さらに詳しい内容は vue-router のドキュメントを参照してください。

とのこと。

vue-router ライブラリを学ぶ

vue-router公式サイト

Introductionで紹介されている
Watch a free video course about Vue Router on Vue School
こちらを見てみました。

本来の目的とは異なりますが

• vue ui というコマンドを使った機能を知る
• VeturというVSCodeの拡張機能がオススメということを知る

などの気づきもありました。

クイックスタートのソースコードを編集してみる

package.json に "vue-router": "^3.0.1"が含まれていたのでプロジェクト作成時にインストールも行われていたようです。
このまま設定を追加していきます。

まずはクイックスタートの構成から

要点は以下３つ

• App.vueが基点となる
• 初期表示時（/)ではHelloWorldのcomponentが呼ばれる
• HelloWordl.vueの中で{{msg}}のデータバインドを行なっている

App.vue

<template>
  <div id="app">
    <img src="./assets/logo.png"> //←Vueのロゴ
    <router-view/> //←ここにルーティング結果がレンダリングされる
  </div>
</template>

router/index.js

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    }
  ]
})

components/HelloWordl.vue

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <h2>Essential Links</h2>
    <ul>
      <li>
        <a
          href="https://vuejs.org"
          target="_blank"
        >
          Core Docs
        </a>
      </li>
      <li>
...
</template>
<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  }
}
</script>

変更してみる

テンプレート（vueファイル）の作成

src/views以下に新規ファイルを作成

Top.vue

<template>
    <div>
        <h2>Top Page</h2>
    </div>
</template>

Sub.vue

<template>
    <div>
        <h2>Sub Page</h2>
    </div>
</template>

ルーティングの設定

router/index.jsのファイルを修正

• path
• name
• component

の設定が必要になります。
先ほど作成したファイルをインポートに追加。

index.js

import Vue from 'vue'
import Router from 'vue-router'
import Top from '@/views/Top'
import Sub from '@/views/Sub'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Top',
      component: Top
    },
    {
      path: '/sub',
      name: 'Sub',
      component: Sub
    }
  ]
})

リンクを設置

App.vueにリンクを作成します。
router-linkを使用。

App.vue

<template>
  <div id="app">
    <router-link to="/">Top</router-link>
    <router-link to="/sub">Sub</router-link>
    <router-view/>
  </div>
</template>

ページを確認

さいごに

ルーティングの設定自体は簡単に実装できました。
パラメーターの設定などはまた別の記事で。