[Vue] Vuetify 설정 #npminstall vuetify

Vuetify

 

webpack-simple 로 프로젝트 생성

vue init webpack-simple [프로젝트명]

 

npm install

터미널에서 npm install 을 하셔도 되고

$ cd vuetify_test
$ npm install

 

설치 후 일단 그냥 실행해 봅니다

Vuetify 설치

$ npm install vuetify

 

설치 후

 

main.js 

import Vue from 'vue'
import App from './App.vue'

import Vuetify from 'vuetify'		// <-- 추가
import 'vuetify/dist/vuetify.min.css'	// <-- 추가
Vue.use(Vuetify);			// <-- 추가

new Vue({
  el: '#app',
  vuetify : new Vuetify(),		// <-- 추가
  render: h => h(App)
})

 

App.vue

<template>
  <v-app id="app">
    <v-select :items="custom_options" item-text="name" item-value="id"/>
  </v-app>
</template>

<script>
export default {
  name: 'app',
  data () {
    return {
      custom_options: [{name: "hello", id: "1"}, {name: "bryan", id: "2"}, {name: "good", id: "3"}, {name: "bye", id: "4"}],
    }
  }
}
</script>

<div id="app"></div>  를  <v-app id="app"></v-app> 으로 변경합니다.

그 안에 tag 들을 v- 로 사용할 수 있습니다.