search
LoginSignup
46

More than 3 years have passed since last update.

posted at

updated at

Vuetifyをインストールして使ってみる

概要

ページャーを作ってみたいなと調べていたら、気になったので使ってみる。

準備

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

test.png

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>&copy; 2017</span>
    </v-footer>
  </v-app>
</template>

<script>
  export default {
    data: () => ({
      drawer: true
    }),
    props: {
      source: String
    }
  }
</script>

サーバ起動

ターミナル
$ npm run dev

下記ページが見れました。

vuetify.png

以上

参考サイト

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
What you can do with signing up
46