vue.js [axios 설치 및 vuetify설치]

 

axios 설치

 

axios는 현재 가장 많이 사용되는 javascript의 http통신 라이브러리이다.

backend URL에 접근하여 데이터를 가지고 오기위해 사용한다. (게시판의 데이터 등)

 

쉽게 말하여 백엔드와 프론트엔드간의 통신을 쉽게 하기 위하여 사용한다.

 

axios라이브러리 설치

 

 

main.js

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

Vue.config.productionTip = false

Vue.prototype.$eventBus = new Vue();
Vue.prototype.$axios = axios


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

 

 

라이브러리를 설치시 main.js에 추가

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

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

출처: https://developerjournal.tistory.com/8 [개발 일기]

 

 

 

 

 

 

 

 

vuetify 설치

 

Vuetify란?

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

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

 

vuetifyjs.com/en/

Vuetify — A Material Design Framework for Vue.js

 

vuetify 설치

 

 

설치 명령어 : vue add vueyify

 

 

 

 

vue화면에서 vuetify화면으로 정상적으로 vuetify가 설치되었다.