概要
ページャーを作ってみたいなと調べていたら、気になったので使ってみる。
準備
vue-cli3.x系でのインストールも試したかったので、vue-cliを3.x系に更新する。
※2.x系も今まで通り使いたかったので、cli-initも追加しておく。
ターミナル
# vue-cli 3.x系をインストール
$ npm install -g @vue/cli
$ npm install -g @vue/cli-init
vue-cli 3.x系でインストール
ターミナル
# プロジェクト作成
$ vue create my-app
$ cd my-app
# vuetifyをインストール
$ vue add vuetify
? Use a pre-made template? (will replace App.vue and HelloWorld.vue) Yes
? Use custom theme? No
? Use custom properties (CSS variables)? No
? Select icon font md
? Use fonts as a dependency (for Electron or offline)? No
? Use a-la-carte components? No
? Use babel/polyfill? Yes
? Select locale en
サーバ起動
結構、見た目がいきなり変わってビックリ（＾＾；）。
ターミナル
$ npm run serve
vue-cli 2.x系でインストール
ターミナル
# プロジェクト作成
$ vue init webpackmy-app
$ cd my-app
# vuetifyをインストール
$ npm install ajv@^6.0.0 --save
$ npm install vuetify --save
$ npm install material-design-icons-iconfont --save
$ npm install @mdi/font --save
main.jsでインポートして展開する。
main.js
import Vue from 'vue'
import App from './App'
import router from './router'
import Vuetify from 'vuetify'
import 'vuetify/dist/vuetify.min.css'
import 'material-design-icons-iconfont/dist/material-design-icons.css'
import '@mdi/font/css/materialdesignicons.css'
Vue.use(Vuetify);
Vue.config.productionTip = false;
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
});
HelloWorld.vueの中身をサンプルコード（layouts/dark.vue）に差し替えてみる。
https://github.com/vuetifyjs/vuetifyjs.com/tree/dev/src/examples
HelloWorld.vue
<template>
<v-app id="inspire" dark>
<v-navigation-drawer
v-model="drawer"
clipped
fixed
app
>
<v-list dense>
<v-list-tile @click="">
<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>
<v-list-tile @click="">
<v-list-tile-action>
<v-icon>settings</v-icon>
</v-list-tile-action>
<v-list-tile-content>
<v-list-tile-title>Settings</v-list-tile-title>
</v-list-tile-content>
</v-list-tile>
</v-list>
</v-navigation-drawer>
<v-toolbar app fixed clipped-left>
<v-toolbar-side-icon @click.stop="drawer = !drawer"></v-toolbar-side-icon>
<v-toolbar-title>Application</v-toolbar-title>
</v-toolbar>
<v-content>
<v-container fluid fill-height>
<v-layout justify-center align-center>
<v-flex shrink>
<v-tooltip right>
<v-btn
slot="activator"
:href="source"
icon
large
target="_blank"
>
<v-icon large>code</v-icon>
</v-btn>
<span>Source</span>
</v-tooltip>
<v-tooltip right>
<v-btn slot="activator" icon large href="https://codepen.io/johnjleider/pen/qxQWda" target="_blank">
<v-icon large>mdi-codepen</v-icon>
</v-btn>
<span>Codepen</span>
</v-tooltip>
</v-flex>
</v-layout>
</v-container>
</v-content>
<v-footer app fixed>
<span>© 2017</span>
</v-footer>
</v-app>
</template>
<script>
export default {
data: () => ({
drawer: true
}),
props: {
source: String
}
}
</script>
サーバ起動
ターミナル
$ npm run dev
下記ページが見れました。
以上