自己紹介的な

はじめまして、小栗旬です。
関東在住、24歳エンジニアです。
2018年8月～ほぼ未経験でSESメインの企業に就職し現在に至ります～。
今年2月から僕が改修を進めている自社パッケージがあるのですが、かくかくしかじかな理由でVue.jsで再構築しようという話になりました。

この記事を書いた理由

• Vueの理解を深める
• アウトプットが苦手なので、克服
• 僕の同僚に見せつける(少しは勉強しろ)

どうせならAdvent Calendarなるイベントで華々しく(？)Qiitaデビューしちゃう。

出来るもの→https://vue-demo-app-a8a49.firebaseapp.com/
ログインボタン押下でホーム画面へ遷移、ホーム画面右上のロゴを押下でログイン画面へ遷移するだけ。
あまりにも内容が薄いことには触れるな。

インスコ

Vueの環境構築を進めるためにはNode.jsが必須？らしい。
ので、まずはNode.jsのインストール。
今回OSはWindows10です。
参考記事→windows10にNode.jsをインストールする

Nodeのインストールと同時に、npmも一緒にインストールされます。
npmとはなんぞや？→npm入門
念のためインストール確認。

node -v
v11.12.0

npm -v
6.11.3

どっちも入っとる事が確認できたところで、ようやくVue CLIのインストール。

npm install -g @vue/cli

こっちも念のため確認。

vue --version
@vue/cli 4.0.5

とりあえずインスコは完了？

Vueアプリケーション作成

Vue CLIでアプリのひな型を作成しちゃう。
vue create アプリ名

アプリ名はとりあえずvue-demo-appとしまそ。

vue create vue-demo-app

すると、なんか聞かれます。

? Please pick a preset: (Use arrow keys)
> default (babel, eslint)
  Manually select features    

ザックリ訳:
デフォルトの設定で作っちゃう？
自分で別の機能追加する？

今回のアプリケーションにはvue-routerというパッケージ？をインストールしたいので、[Manually select features]を選択します。
(方向キー上下で矢印の移動、Enterで決定)

すると、インストールしておきたい機能を聞かれます。

? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection)
>(*) Babel
 ( ) TypeScript
 ( ) Progressive Web App (PWA) Support
 (*) Router
 ( ) Vuex
 ( ) CSS Pre-processors
 (*) Linter / Formatter
 ( ) Unit Testing
 ( ) E2E Testing                                                                                                                                 

それぞれの機能については今回は省きます。
今回はデフォルトのbabel, eslintに加えて、Routerにチェックを入れて進めます。
(方向キー上下で矢印の移動、Spaceでチェック、Enterで決定)

この後も色々と聞かれますが、今回は全てEnterで進めていきやす。

vue createが正常に終わると、現在のディレクトリにひな型が作成されていますので、移動。

cd vue-demo-app

vueアプリケーション実行。

npm run serve

http://localhost:8080/ にブラウザでアクセスすると、vueアプリケーションのひな型が作成されているのが確認できやす。

Vuetify.jsインストール

Vuetifyとは

VuetifyはVue.jsのマテリアルデザインコンポーネントフレームワークです。美しいコンテンツを持つリッチアプリケーションを作成するのに必要不可欠なツールを提供することを目的としています。

ザックリいうと、vueで利用できるUIコンポーネント的な。
簡単にシャレオツなUI実現しちゃうよ的な。

早速作成したアプリに、Vuetifyを導入しちゃいやしょう。

vue add vuetify

vue create時と同じように色々と聞かれますが、とりあえずデフォルトで進めちゃう。
インストールが完了したあと、もう一度[npm run serve]で実行し、もう一度http://localhost:8080/ にアクセスしてみる。

シャレオツ。

色々いじってモックアップ

今回作りたい画面は二つ。

• ログイン画面
• ログイン後のホーム画面

これらをVuetifyのテンプレートを使って作っちゃいます。

ログイン画面

テンプレ

src/views/ にLogin.vueを作成し、こちらのコードを貼り付けます。

<template>
  <v-app id="inspire">
　　<v-content>
長いので以下略

ホーム画面

テンプレ

src/views/ にHome.vueを作成し、こちらのコードを貼り付けます。

<template>
  <v-app id="inspire">
    <v-navigation-drawer
      v-model="drawer"
      :clipped="$vuetify.breakpoint.lgAndUp"
      app
    >
長いので以下略

vue-routerの設定

src/router/index.jsの中身をいじっていきます。
参考記事→今さら聞けない？Vue Router

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
import Login from '../views/Login.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'Login',
    component: Login
  },
  {
    path: '/Home',
    name: 'Home',
    component: Home
  }
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router

ここまで上記の手順通りで進めている場合、viewsフォルダにAbout.vueが存在するはずですが、いらないので削除しておきませう。

App.vue編集

src/App.vueを編集していきやす。
ざっくりいうとこのファイルで全てのviewを扱っている？(？？？)

App.vueの<template>の中を<router-view/>のみに書き直します。

<template>
  <router-view/>
</template>

<router-view>とは、現在のルートに合わせてコンポーネントを切り替えてくれる感じです。
今回の例では、
localhost:8080/ でLogin.vueに
localhost:8080/Home でHome.vueに中身が書き換わるイメージです。

では実際に確認してみます。
この状態でまた[npm run serve]コマンドで実行し、
http://localhost:8080/
http://localhost:8080/Home
のそれぞれにアクセスしてみます。

http://localhost:8080/

http://localhost:8080/Home

想定通り、ログイン画面とホーム画面が表示されやした。
src/componentsの中にあるHelloWorld.vueはもう必要ないので削除しちゃいましょう。

ログイン画面のアイコンが正しく表示されていないので、削除しときます。

<v-form>
  <v-text-field label="Login" name="login" prepend-icon="person" type="text" />
  <v-text-field id="password" label="Password" name="password" prepend-icon="lock" type="password" />
</v-form>

上記から「prepend-icon」という部分を削除。

vue-routerでページ遷移

ログイン画面→ホーム画面へのページ遷移を実装します。
src/Login.vueのログインボタンを以下に編集。

<v-btn color="primary" @click="login">Login</v-btn>

src/Login.vueのscript内にmethodsを追加。

<script>
export default {
  props: {
    source: String
  },
  methods: {
    login() {
      this.$router.push({ path: "/Home" });
    }
  }
};
</script>

以上でログインボタンを押下するとホーム画面へ遷移するようになっているかと思います。

かなりざっくりと書いていきましたが、今回はとりあえずこの辺で。

終わりに

Qiita初投稿の感想

現在はvueについて理解しているというより感覚で進めている節があるので、それを言語化しようとすると言葉に詰まる。
→他の記事から引用したり、調べながら書いていけばいいと気付く。

「人に説明する」と考えると下手なことが書けない。
→明らかにおかしな事を書いていれば、他のユーザーが指摘してくれるであろう。という事でそこまで意気込んで書く必要はないかもしれない。

ついでに

これからもっと積極的にアウトプットや、SNS等での交流に力を入れようと意気込んでおります～！
ドチャクソ暇な時にでも声かけてください。
ケバブ。