[vscode] Spring Boot + Vue 연동 프로젝트 생성 2 - 뷰 앱

간단히 page를 routing 시킨 후 spring boot에서 사용할 수 있게 해보자.

 

뷰 프로젝트의 구조는 아래와 같다.

 

1. package.json 설정

 - 실행시 브라우저 자동 연동 처리

"scripts": {
    "serve": "vue-cli-service serve --open --port 9090",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },

 - console 사용 허용

"rules": {
      "no-console":"off"
    },

 

2. axios.js - axios 통신 설정

import axios from "axios"

export default axios.create({
    baseURL:"http://localhost:8080"
});

 

3. router.js - vue-router 설정

import VueRouter from "vue-router"
import Vue from "vue"

import vSub1  from "../components/Sub1"
import vSub2  from "../components/Sub2"
import vSub3  from "../components/Sub3"
Vue.use(VueRouter);


const router = new VueRouter({
    routes:[
        {
            path:"/sub1",
            alias:"/",
            component:vSub1
        },
        {
            path:"/sub2",
            component:vSub2
        },
        {
            path:"/sub3",
            component:vSub3
        }
    ]
})
export default router;

 

4. Sub1.vue, Sub2.vue, Sub3.vue - 내용은 모두 같고 단지 h1의 내용만 상이함.

<template>
  <div class="hello">
    <h1>여기는 sub 1</h1>
    {{user.name}}, {{user.age}}
  </div>
</template>

<script>
import axios from "../js/axios";
export default {

  data(){
    return {
      user:{name:"", age:0}
    };
  },
  mounted(){
    axios.get("/rest")
    .then(res=>{
      this.user = res.data;
    });
  }
}
</script>

 

5. App.vue - router를 이용해 Sub 컴포넌트 사용

<template>
  <div id="app">
    <router-link to="/sub1">sub1</router-link>
    <router-link to="/sub2">sub2</router-link>
    <router-link to="/sub3">sub3</router-link>

    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'app',
  components: {
    
  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

 

6. 모듈 실행 및 테스트

 

 

 

다음글: https://goodteacher.tistory.com/91