[Vue] 초기 세팅에 필요한 부분(프로젝트 생성,springboot연동, bootstrap 및 axios 설치)

front -vue project 생성

vue프로젝트 루트에서

npm install -g @vue/cli 

or

yarn global add @vue/cli

로 vue cli를 설치한다.

설치 후 vue create front 로 front 프로젝트 생성 완료

 

 

Springboot와 연동을 위한 설정

front 프로젝트에서 vue.config.js 파일을 생성하고 아래 코드를 작성한다.

- 아래 코드의 proxy 서버를 통해 base 경로를 설정하고 axios로 통신할때 사용하는걸로 보여진다. (포인트)

 

BootStrap 설정

Bootstrap 설치

npm install vue bootstrap bootstrap-vue

Main.js에 작성

import Vue from 'vue'
import { BootstrapVue, IconsPlugin } from 'bootstrap-vue'
 
// Import Bootstrap an BootstrapVue CSS files (order is important)
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'
 
// Make BootstrapVue available throughout your project
Vue.use(BootstrapVue)
// Optionally install the BootstrapVue icon components plugin
Vue.use(IconsPlugin)

 

axios 설치

npm install --save axios vue-router

Main.js에 작성

import axios from 'axios'
Vue.prototype.$axios = axios

Vuex 설치

npm i vuex --save

import Vuex from 'vuex'
 
Vue.use(Vuex)

 

sass-load