Vue.jsとVuetifyでマテリアルデザインなWebアプリをつくろうにもスタートダッシュでかなり躓くのでメモ
CDNのVue.jsではなく単体の.vueをwebpackでコンパイルする方でやります。
まずは各種モジュールのインストール
|
1 2 3 4 5 6 7 |
npm install -g vue-cli vue init webpack-simple my-app cd my-app npm install npm install vue-router vuetify --save |
次にindex.htmlを編集
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<!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でアクセスできるようにします
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
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を参考にしました
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 |
<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を以下のように
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<template> <v-container fluid> <p>this is dash board</p> </v-container> </template> <style> </style> |
Pages/Setting.vueを以下に
|
1 2 3 4 5 6 |
<template> <v-container fluid> <p>this is setting</p> </v-container> </template> |
これであとは
|
1 |
npm run build |
してindex.htmlにアクセスすれば以下のようなページが完成しているはずです
