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


# はじめに
前回、[Vue.jsプロジェクト開発を始める準備](https://qiita.com/e-onm/items/4e9e953f1e85d02c01c7)という記事を書きました。
こちらではプロジェクトの作成とブラウザでの実行確認を行いました。
今回はその続きです。

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

# やったこと

## 公式から学ぶ
まずはVue.jsの[公式ガイド](https://jp.vuejs.org/v2/guide/)を一通り読んでみました。

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

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

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

とのこと。

## vue-router ライブラリを学ぶ

[vue-router公式サイト](https://router.vuejs.org/)

Introductionで紹介されている
[Watch a free video course about Vue Router on Vue School](https://vueschool.io/courses/vue-router-for-everyone?friend=vuejs)
こちらを見てみました。

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

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

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

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

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

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

![スクリーンショット 2020-07-06 17.20.08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/395809/131f39c1-e1a9-f423-1b05-12fec8e1919c.png)


要点は以下３つ

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

#### ページを確認
![スクリーンショット 2020-07-06 18.15.44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/395809/dfceb298-9bfe-c0b3-97ca-709a8fa49838.png)

![スクリーンショット 2020-07-06 18.16.20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/395809/444e4998-923f-caa0-3355-eedaca3d094f.png)

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