vue 시작하기 및 spring 연동

vue 설치

---

# install vue
$ npm install -g @vue/cli
# check vue version
$ vue -V
# create vue project
$ vue create ${project_name}
# start vue
$ vue run serve
# start vue ui
$ vue ui

출처

• https://codingapple.com/unit/vue-3-installation-with-vue-cli/

vue route

---

vue-route를 사용하기 위해 ui를 이용하여 vue-route를 invoke 시켰다.
vue-route를 invoke시키면, router라는 디렉토리가 생성된다.
디렉토리 내부의 index.js를 수정하여 route를 설정한다.
index.js

const routes = [
  {
    path: '/',
    name: 'myview',
    component: () => import(/*
      webpackChunkName: "about",
      webpackPrefetch: true */
      '../views/MyView.vue'
    )
  }
]

webpackChunkName
해당 내용을 통해, vue가 어떤 js에 컴파일될지 결정한다.
{이름}.{해시값}.js 형태로 설정된다.
webpackPrefetch
해당 내용을 통해, js가 미리 로딩될지 결정한다.
'../views/MyView.vue'
해당 내용에서 어떤 vue 파일을 가져올지 결정한다.

즉 위의 내용을 통해, /myview로 접근시, about.${hash}.js라는 파일에 컴파일 하여, 메인 페이지 접속시 미리 로딩한다.

App.vue 파일에 가면 nav 및 router-link를 통해 생성된 route 태그가 존재한다.

App.vue

<nav>
  <router-link to="/">HOME</router-link> | 
  <router-link to="/myview">myview</router-link>
</nva>
<router-view>

위와 같은 코드를 통해 a태그를 생성,
하단의 router-view 코드에 관련 내용이 생성된다.

vue & spring 연동

---

vue & spring 설치

1. spring 프로젝트 생성
2. spring 소스 디렉토리에서 vue 디렉토리 생성

mkdir vue
mv vue

3. npm i -g @vue/cli-init

npm i -g @vue/cli-init

4. vue init webpack vue-front

vue init webpack vue-front

에러 발생
vue : 이 시스템에서 스크립트를 실행할 수 없으므로 C:\Users\ds\AppData\Roaming\npm\vue.ps1 파일을
로드할 수 없습니다.
window 실행적책으로 인한 오류
window는 기본적으로 명령어 실행만 가능, 스크립트 실행 권한이 없음.

set-executionpolicy remotesigned
y

관리자 권한으로 위 명령어를 실행 후, vue 명령어를 통해 확인 가능

axios 설치

npm install --save axios

spring 설정

application.yml

server:
    port: 8090

포트 충돌을 막기위해 vue와 별도의 포트 설정
MainController.java

@RestController
@RequestMapping("/v1")
public class MainController {
    
    @GetMapping("/test")
    public String doTest(){
        System.out.println("logging~~");
        return "myText";
    }
}

vue axios 기본설정

main.js

...
import axios from 'axios'

const app=createApp(App).use(store).use(router)
app.config.globalProperties.axios=axios
app.mount('#app')

vue.config.js

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  devServer:{
    proxy: {
      '/v1' : {
        target: 'http://localhost:8090', // spring 주소
        changeOrigin: true
      }
    }
  }
})

위에서 설정한 8090 포트를 설정해준다

vue axios 코드

SpringView.vue

...
posting = ()=>{
  this.axios.get('/v1/test')
  .then((result)=>{
    console.log(result);
  })
}
...

postin() 메소드가 실행될때, spring으로부터 json 형태의 값을 가져온다.
결과값

{
  data: 'myText', status: 200, statusText: 'OK', 
  headers: AxiosHeaders, config: {…}, 
    …}