- 어제까지 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를 사용하여 구현하기로 했다
(사실 참고하는 자료가 Vuetify를 사용해서)
Vuetify 설치
vue -cli로 처음에 만든 vue파일 위치에서 vuetify를 설치해보자.
- vue add vuetify
- - Default 선택
설치를 마치면 package.json에서 확인이 가능하다
npm run serve 실행 시 화면이 vue.js에서 vuetify 로 바뀐 것을 볼수있다
'Vue > Vue' 카테고리의 다른 글
6. get방식 통신2 (Vue + Springboot 연동 4) (0) | 2021.11.23 |
---|---|
5. get방식 통신 (Vue + Springboot 연동 3) (0) | 2021.11.18 |
3. Vue + Springboot 연동 1 (0) | 2021.11.17 |
2. Vue.js 시작하기 (0) | 2021.11.17 |
1. Vue.js 의 구조와 빌드하기 (0) | 2021.11.14 |