[Vue] Vue CLI3 + Vuetify 개발환경 세팅

Vue CLI3 + Vuetify 개발환경 세팅

---

토이프로젝트를 하기 위해 Vue 를 사용하기로 하였다.

빠른 설치환경을 위해 Vue CLI 를 사용하고 프론트 디자인은 전문 영역이 아니기때문에 Vuetify 를 사용하였다.

Vue CLI3 + Vuetify 개발환경 세팅은 몇가지 명령어로 쉽게 생성할 수 있따. 

 

기본적으로 node 가 설치되어 있다는 가정하에 포스팅을 시작하겠다.

( 만약 Node 가 설치 되어있지 않다면 [Node.js] Node.js 설치하기 (Windows10) 를 보고 설치하길 바란다 ) 

 

1. Vue CLI 설치

> npm install @vue/cli -g

 

 

2. Vue App 만들기

> vue create my-app

 

명령어를 입력하면 위와 같이 프로젝트설정 화면이 나온다.

프로젝트 설치시 vue-router, vuex 등 함께 설치하고 싶다면 아래 Manually select features 를 선택하여 세부설정을 한다.

( 나중에 원한다면 얼마든지 설치 가능하다 )

현재는 default 로 설치하겠다 

 

4. vuetify 설치

> vue add vuetify

 

 

이제 프로젝트를 살펴보면 

 

plugins/vuetify.js 가 생성되었을것이다.

또한 main.js 에 vuetify 를 import 하여 Vue 생성자에 추가된것을 확인할 수 있다.

 

main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import vuetify from './plugins/vuetify';

Vue.config.productionTip = false

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

 

App.vue

<template>
  <v-app>
    <v-app-bar app>
      <v-toolbar-title class="headline text-uppercase">
        <span>Vuetify</span>
        <span class="font-weight-light">MATERIAL DESIGN</span>
      </v-toolbar-title>
      <v-spacer></v-spacer>
      <v-btn
              text
              href="https://github.com/vuetifyjs/vuetify/releases/latest"
              target="_blank"
      >
        <span class="mr-2">Latest Release</span>
      </v-btn>
    </v-app-bar>

    <v-content>
      <HelloWorld/>
    </v-content>
  </v-app>
</template>

<script>
import HelloWorld from './components/HelloWorld';

export default {
  name: 'App',
  components: {
    HelloWorld,
  },
  data: () => ({
    //
  }),
};
</script>

 

5. App 실행

> cd my-app
> npm run serve

 

App 이 실행되면 위와 같이 화면이 나올것이다.

이로써 Vue CLI + Vuetify 개발환경 세팅이 완료되었다.