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にアクセスすれば以下のようなページが完成しているはずです