今回の最速はたぶん煽りではありません。
ただ、最速だけだと記事も最短になってしまうので、Vue CLI 3 を使ってマニュアルで仕立てる手も紹介します。
この記事は MacOS 10.14.2 で検証してあります。
準備1
最速の道
雛形のダウンロード
Creative Tim のホームページから Vuetify Material Dashboard をダウンロードします。
（無料ですが登録が必要です。）
実行
ダウンロードした zip を解凍したフォルダに入って
$ npm i
$ npm run dev
として、ブラウザで
にアクセスすれば以下の画面が表示されます。
カスタマイズ
あとは上記フォルダの中の src フォルダ以下を弄っていけばいいです！
マニュアルで仕立てる道
準備2
Vue CLI 3 のインストール
もし vue-cli の昔のバージョンを使っていたら、アンインストールします。
$ npm uninstall -g vue-cli
Vue CLI 3 をグローバルにインストールします。
$ npm i -g @vue/cli
プロジェクトの作成
例として、experimental という名前でプロジェクトを作成します。選択肢がでてきます。
$ vue create experimental
Vue CLI v3.4.0
? Please pick a preset:
default (babel, eslint)
❯ Manually select features
Manually select features を選択します。
Vue CLI v3.4.0
? Please pick a preset: Manually select features
? Check the features needed for your project:
◯ Babel
◯ TypeScript
◯ Progressive Web App (PWA) Support
❯◉ Router
◉ Vuex
◯ CSS Pre-processors
◯ Linter / Formatter
◯ Unit Testing
◯ E2E Testing
あとで間違いなく必要になるので、Router と Vuex を選択します。他のは説明の都合上はずします。必要だったら後から入れられます。
Vue CLI v3.4.0
? Please pick a preset: Manually select features
? Check the features needed for your project: Router, Vuex
? Use history mode for router? (Requires proper server setup for index fallback in
production) (Y/n)
いろいろ聞いてきますが、デフォルトで進めます。
プロジェクト名（ここでは experimental）のフォルダが作成されます。また自動的に .git も作られて git で管理できるようになります。
次の作業のために、できたフォルダに入ります。
$ cd experimental
プロジェクトに Vuetify を入れる。
コンポーネントライブラリを使えば開発をとても早く進められます。今回は Vuetify を入れます。
Vuetify を入れるには、コマンドラインでやる方法と GUI でやる方法があります。
コマンドラインでやる方法
$ vue add vuetify
とやるだけです。簡単ですね！
GUI を使う方法
Vue CLI 3 からブラウザを GUI に使ってプロジェクトを管理できるようになりました。使わない手はありません。
$ vue ui
とやると、ブラウザが開いてプロジェクト一覧が表示されます。
Import タブを選んで、Import this folder ボタンを押します。
プロジェクトのダッシュボードが表示されます。
左側の上から2つめのプラグインボタンを押すと現在インストールされてるプラグインが表示されます。
右上の Add Plugin ボタンを押して、サーチフィールドに vuetify と入力します。
一番上の vue-cli-plugin-vuetify を選択して右下の install ボタンを押します。
Finish Installation を押せばなんと Git の差分の画面になります。コミットするなりスキップするなりしましょう
無事 Vuetify がインストールできました。
一旦実行
$ npm run serve
とすると、サービスが始まります。
ブラウザで localhost:8080 にアクセスすると、以下の画面になり、Vuetify がインストールできたことが確認できます。
ダッシュボード化
ここからが本題です。
いろいろなデザインが考えられますが、今回はとりあえずこんな風にしてみます。
App.vue
- 左側にドロワーを配置して、「ダッシュボード」「設定」「について」メニューをつけます。
- 右側にドロワーを配置して、「ログアウト」ボタンをつけます。
- 上にツールボックスを配置してドロワーの出し入れをできるようにします。
<template>
<v-app>
<v-navigation-drawer app clipped fixed v-model="leftDrawer" :mini-variant="leftMiniVariant">
<v-list>
<v-list-tile to='/'>
<v-list-tile-action><v-icon>dashboard</v-icon></v-list-tile-action>
<v-list-tile-content><v-list-tile-title>ダッシュボード</v-list-tile-title></v-list-tile-content>
</v-list-tile>
<v-list-tile to='/prefs'>
<v-list-tile-action><v-icon>settings</v-icon></v-list-tile-action>
<v-list-tile-content><v-list-tile-title>設定</v-list-tile-title></v-list-tile-content>
</v-list-tile>
<v-list-tile to='/about'>
<v-list-tile-action><v-icon>store</v-icon></v-list-tile-action>
<v-list-tile-content><v-list-tile-title>について</v-list-tile-title></v-list-tile-content>
</v-list-tile>
</v-list>
</v-navigation-drawer>
<v-toolbar app clipped-left clipped-right>
<v-toolbar-side-icon @click.stop="leftDrawer = !leftDrawer"></v-toolbar-side-icon>
<v-btn icon @click.stop="leftMiniVariant = !leftMiniVariant">
<v-icon v-html="leftMiniVariant ? 'chevron_right' : 'chevron_left'"></v-icon>
</v-btn>
<v-toolbar-title>The Dashboard</v-toolbar-title>
<v-spacer></v-spacer>
<v-toolbar-title>{{ $store.state.user ? $store.state.user : '未ログイン' }}</v-toolbar-title>
<v-btn icon @click.stop="rightDrawer = !rightDrawer">
<v-icon>account_circle</v-icon>
</v-btn>
</v-toolbar>
<v-content><router-view/></v-content>
<v-navigation-drawer app clipped fixed v-model="rightDrawer" right>
<v-list>
<v-list-tile to="/login">
<v-list-tile-action><v-icon>dashboard</v-icon></v-list-tile-action>
<v-list-tile-content><v-list-tile-title>ログアウト</v-list-tile-title></v-list-tile-content>
</v-list-tile>
</v-list>
</v-navigation-drawer>
<v-footer fixed app><span>© 2018</span></v-footer>
</v-app>
</template>
<script>
export default {
name: 'App'
, data () {
return {
leftMiniVariant : false
, leftDrawer : false
, rightDrawer : false
}
}
}
</script>
コンポーネントたち
とりあえずダミーをおいておきます。
<template>
<h1>Dashboard</h1>
</template>
<template>
<h1>About</h1>
</template>
<template>
<h1>Prefs</h1>
</template>
<template>
<h1>Login/Logout</h1>
</template>
Vuex(ストア)
インプリ時にきっと必要になるログイン情報をとりあえず置いておきます。
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store(
{ state : { user : '' }
, mutations : { user : ( state, payload ) => state.user = payload }
}
)
vue-router
import Vue from 'vue'
import Router from 'vue-router'
import Dashboard from './views/Dashboard.vue'
Vue.use(Router)
export default new Router(
{
mode: 'history'
, base: process.env.BASE_URL
, routes: [
{ path: '/' , component: Dashboard }
, { path: '/about' , component: () => import( /* webpackChunkName: "about" */ './views/About.vue' ) }
, { path: '/prefs' , component: () => import( /* webpackChunkName: "prefs" */ './views/Prefs.vue' ) }
, { path: '/login' , component: () => import( /* webpackChunkName: "login" */ './views/Login.vue' ) }
]
}
)
メイン
CLIが作ったままで変更ありません。
import Vue from 'vue'
import './plugins/vuetify'
import App from './App.vue'
import router from './router'
import store from './store'
Vue.config.productionTip = false
new Vue({
router,
store,
render: function (h) { return h(App) }
}).$mount('#app')
最後に
Vuetify ベースのテーマ がとても充実してきました。もう自分でスクラッチから作る時代ではないかもしれません。