実践で覚えるVue.js(Vuetify) その２

前回の内容

実践で覚えるVue.js(Vuetify) その１

Vue.jsとVuetifyを使用して、
環境構築をするところまで行いました。
今回は、Vuetify公式にあるレイアウトを使用して、
サイトを作っていきたいと思います。

既存レイアウトの確認

以下より確認できます。

Vuetify公式サイトレイアウト

今回は、「Centered」と「Google Keep」を使ってみたいと思います。

既存レイアウト「Centered」

まずは、Centeredの<>ボタンを押します。
すると、ソースが表示されますので、
これをコピペして活用します。

作成先は、前回作成した「vue-project」を使用していきます。
※VSCode開くときに、vue-projectフォルダを選択すると後々やりやすいです。
※以下ソースは、v-appとv-mainを削除しています。

src/views/Login.vue

<template>
  <v-container class="fill-height" fluid>
    <v-row align="center" justify="center">
      <v-col cols="12" sm="8" md="4">
        <v-card class="elevation-12">
          <v-toolbar color="primary" dark flat>
            <v-toolbar-title>Login form</v-toolbar-title>
            <v-spacer></v-spacer>
            <v-tooltip bottom>
              <template v-slot:activator="{ on }">
                <v-btn :href="source" icon large target="_blank" v-on="on">
                  <v-icon>mdi-code-tags</v-icon>
                </v-btn>
              </template>
              <span>Source</span>
            </v-tooltip>
          </v-toolbar>
          <v-card-text>
            <v-form>
              <v-text-field label="Login" name="login" prepend-icon="mdi-account" type="text"></v-text-field>

              <v-text-field
                id="password"
                label="Password"
                name="password"
                prepend-icon="mdi-lock"
                type="password"
              ></v-text-field>
            </v-form>
          </v-card-text>
          <v-card-actions>
            <v-spacer></v-spacer>
            <v-btn color="primary">Login</v-btn>
          </v-card-actions>
        </v-card>
      </v-col>
    </v-row>
  </v-container>
</template>

<script>
export default {
  props: {
    source: String
  }
};
</script>

画面表示させる（routerの設定とApp.vueの設定)

以下ファイルにLogin.vueの設定を追加します。

src/router/index.js

// ▽▽▽デフォルト▽▽▽
import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'

Vue.use(VueRouter)

mode: 'history',

  const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
  },
  // △△△デフォルト△△△
  // ▽▽▽追加▽▽▽
  {
    path: '/login',
    name: 'Login',
    component: () => import('../views/Login.vue')
  },
  // △△△追加△△△
]

// ▽▽▽追加▽▽▽
// アクセスするURLの#を消すために「mode: 'history'」を追加
const router = new VueRouter({
  mode: 'history',
  routes
})
//△△△追加△△△


export default router

※src/App.vueの中身は一度すべて消した上で、以下に書き換えてください。

src/App.vue

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

<script>
export default {
  name: 'App',
};
</script>

準備完了です。

それでは、プロジェクトを起動してみましょう。

ターミナル

#現在位置確認
pwd
→vue-projectフォルダを選択していること

npm run serve

#起動後、以下URLにアクセス
http://localhost:8080/login

→ログイン画面が表示されること

※アクセスするURLにある#の消し方

まとめ

今回のような流れでアクセスするページの追加は行えますので、
自由に追加してみてください。

次回は、ログインボタンを押したら、
「Google Keep」ページに遷移する方法について書いていきたいと思います。

以上