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

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)로 바꿔본다.
htps : // 기주 b. 이 m/ゔ에치 fyjs/ゔ에치 fyjs. 이 m / t ree /에서 v / src / 에 mp ぇ s

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 - 빠른 시작

Vue Cli3 - Pulling 2.x Templates (Legacy)

GitHub - Vuetify/examples

Vuetify color theme builder

Vuetify icons

Vuetify theme