Vue.jsとVueRouterとVuetifyでナビゲーション付きページのシンプルなサンプル

Vue.jsとVuetifyでマテリアルデザインなWebアプリをつくろうにもスタートダッシュでかなり躓くのでメモ

CDNのVue.jsではなく単体の.vueをwebpackでコンパイルする方でやります。

まずは各種モジュールのインストール

npm install -g vue-cli
vue init webpack-simple my-app 
cd my-app 
npm install 
npm install vue-router vuetify --save

次にindex.htmlを編集

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>ui</title>
    <link href='https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons' rel="stylesheet">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
  </head>
  <body>
    <div id="app"></div>
    <script src="/static/build.js"></script>
  </body>
</html>

src/main.jsにvueを使う設定と、ルーティングを記載

今回はPagesフォルダにDashboardとSettingページを作り、それぞれ/と/settingでアクセスできるようにします

import Vue from 'vue'
import App from './App.vue'
import VueRouter from 'vue-router'
import Vuetify from 'vuetify'

Vue.use(VueRouter);
Vue.use(Vuetify)

import '../node_modules/vuetify/dist/vuetify.css'

import dashboard from './Pages/Dashboard.vue'
import setting from './Pages/Setting.vue'

const routes = [
  {path:'/',component:dashboard},
  {path:'/setting',component:setting}
];

const router = new VueRouter({
    routes
});

new Vue({
  el: '#app',
  render: h => h(App),
  router:router
})

App.vueを編集 VuetifyjsのExampleのGoogle Contactsを参考にしました

<template>
  <v-app>
    <v-navigation-drawer
      fixed
      clipped
      app
      v-model="navBar"
    >
        <v-list dense class="pt-0">
          <router-link to="/">
            <v-list-tile>
              <v-list-tile-action>
                <v-icon>dashboard</v-icon>
              </v-list-tile-action>
              <v-list-tile-content>
                <v-list-tile-title>DASHBOARD</v-list-tile-title>
              </v-list-tile-content>
            </v-list-tile>
          </router-link>
          <router-link to="/setting">
            <v-list-tile>
              <v-list-tile-action>
                <v-icon>settings</v-icon>
              </v-list-tile-action>
              <v-list-tile-content>
                <v-list-tile-title>SETTING</v-list-tile-title>
              </v-list-tile-content>
            </v-list-tile>
          </router-link>
        </v-list>
      </v-navigation-drawer>
    <v-toolbar
      dark
      color="primary"
      clipped-left
      fixed
      app
    >
      <v-toolbar-side-icon @click.stop="navBar = !navBar"></v-toolbar-side-icon>
      <v-toolbar-title class="white--text">Title</v-toolbar-title>
      <v-spacer></v-spacer>
      <v-btn icon>
        <v-icon>search</v-icon>
      </v-btn>
      <v-btn icon>
        <v-icon>apps</v-icon>
      </v-btn>
      <v-btn icon>
        <v-icon>refresh</v-icon>
      </v-btn>
      <v-btn icon>
        <v-icon>more_vert</v-icon>
      </v-btn>

    </v-toolbar>
    <v-content>
      <v-container fluid fill-height>
        <v-fade-transition mode="out-in">
          <router-view></router-view>
        </v-fade-transition>
      </v-container>
    </v-content>
  </v-app>
</template>

<script>

  export default {
    name: 'app',
    data () {
      return {
          navBar:null
      }
    },
    mounted: function () {
      
    },
    destroyed: function () {

    }
  }
</script>

<style>
  a {
    text-decoration: none;
  }

</style>

Pages/Dashboard.vueを以下のように

<template>
  <v-container fluid>
    <p>this is dash board</p>

  </v-container>

</template>


<style>
</style>

Pages/Setting.vueを以下に

<template>
  <v-container fluid>
    <p>this is setting</p>

  </v-container>
</template>

これであとは

npm run build

してindex.htmlにアクセスすれば以下のようなページが完成しているはずです

コメントを残す コメントをキャンセル

コメントを残すコメントをキャンセル