[vue] vuetify 사용 설정

[vue] vuetify 사용 설정

 

작성일자 : 2019.07.21

환경 : Vue 2.6.10, Vue-Cli 2.9.10, npm 6.9.0, webpack 3.12.0

 

 

1. vuetify 추가

 

%ProjectPath%> npm install vuetify

 

node_modules 밑에 vuetify 생성 확인

 

 

 

2. vuetify 사용 설정

 

%ProjectPath%> vue add vuetify

 

아래 설정이 자동으로 추가됨

 

main.js

... import vuetify from './plugins/vuetify' new Vue({   render: h => h(App),   vuetify,   router }).$mount('#app') ...

 

src/plugins/vuetify.js

import Vue from 'vue'; import Vuetify from 'vuetify/lib/framework'; Vue.use(Vuetify); export default new Vuetify({ });

 

src/components/HelloWorld.vue

<template>     ...    ... </template> <script>    export default {       ...       ...    } </script>

 

app.vue template 수정

 

 

3. 확인

 

vuetify 버튼 적용 확인

 

 

<template>   <v-app id="app">     <v-btn color="success">Success</v-btn>      <v-btn color="error">Error</v-btn>     <v-btn color="warning">Warning</v-btn>     <v-btn color="info">Info</v-btn>   </v-app> </template>

 

접근 시 vuetify 버튼 확인 가능

 

4. 사용 예시

 

vuetify 홈페이지에서 추가하고 싶은 Component를 찾기

https://vuetifyjs.com/ko/components/api-explorer

 

'Footer를 만들어보자'

 

예제 우측 상단 <> 버튼을 누르면 template과 script 코드가 나온다

 

 

foorter.vue 생성 후 template, script 복붙

 

 

 

컴포넌트를 사용할 vue에 추가

 

... <script> import vfooter from '@/components/footer' export default {    name: 'App',    components: {       vfooter    } } </script> ...

 

template에 추가 

# vuetify 컴포넌트는 <v-app> 태그 안에 존재해야함

 

 

footer 추가 확인