4. axios & vuetify (Vue + Springboot 연동 2)

• 어제까지 Vue build후 Springboot를 실행하면 Vue화면이 나오는 것 까지 성공적으로 실행했습니다.
• 이번에는 Vue와 Springboot 연동을 위해 axios와 vuetify를 설치할 것입니다
• (vuetify는 3.xx 버전을 지원하지 않아서 2.xx버전을 다운받았음..)

 

 

1. Axios

---

javascript 어플리케이션에서 서버 통신을 하기 위한 HTTP 통신 라이브러리.  

Vue.js에 종속되는 것이 아니라 다른 js 어플리케이션에서도 일반적으로 많이 사용된다

• npm install axios

 

vue의 node_modules에 설치하기 위해서 처음에 만든 vue파일 위치에서 axios를 받자.

 

 

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

Vue.prototype.$eventBus = new Vue();
Vue.prototype.$axios = axios
// 다른 컴포넌트에서는 import 없이 this.$axios로 사용가능


Vue.config.productionTip = false

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

라이브러리를 설치하면 가장 상위 인스턴스인 main.js에 import한다.

전역으로 axios를 사용하기 위해서 Vue.prototype.$axios를 정의

다른 컴포넌트에서는 import 하지않고 this.$axios로 간단하게 사용할 수 있다

 

(출처: https://developerjournal.tistory.com/8)

 

 

 

 

2. Vuetify

---

Vuetify란?

Vuetify는 Vue.js를 위한 컴포넌트 라이브러리이며,  Material Design Framework다.

쉽게 말해 vue 에서 사용할 수 있는 용이한 UI 라이브러리라고 할 수 있다.

 

 

UI프레임워크를 이용하면

• 생산성이 높다.
• 일관성이 있어 유지보수가 용이.
• 코드에 대한 재사용성이 높다.

Vuetify — A Material Design Framework for Vue.js

 

샘플소스도 있고 여러가지 장점이 있는 Vuetify를 사용하여 구현하기로 했다

(사실 참고하는 자료가 Vuetify를 사용해서)

 

 

Vuetify 설치

vue -cli로 처음에 만든 vue파일 위치에서 vuetify를 설치해보자.

 

•   vue add vuetify
•   - Default 선택

 

 

설치를 마치면 package.json에서 확인이 가능하다

npm run serve 실행 시 화면이 vue.js에서 vuetify 로 바뀐 것을 볼수있다