본문 바로가기

데일리 공부 기록

hands on vue3 - vue3 & spring boot로 api 연동한 뒤 값 가져와보기(가장 쉬운 예제!) - 2편 vue 셋팅

728x90

[목표]

1편에서는 백엔드 셋팅을 마쳤다.

2편에서는 프론트 셋팅을 하고 

백단에 api 요청하여 값을 

console에 찍어보자

 

vue.js에 대한 환경설정을 하지 않았다면 하고 오길 바람!

 

Vscode로 진행한다. 

 


프로젝트 생성

윈도우일 경우 

vue.cmd를 붙여줘야 보안문제가 안생긴다. 

 

버전 3으로 진행

 

서버 실행

 

실행해서 들어가면 위와 같은 이미지가 뜬다. 

 

우리는 간단하게 실행하기 위해

버튼만 생성하도록 한다.

 

[App.vue]

<template>
  <button @click="test">Test Button</button>
</template>

<script>

export default {
  methods: {
    test(){
      alert("버튼 테스트!");
    }
  }
}
</script>

버튼을 눌렀을 때

버튼을 눌러 메소드가 잘 실행되는 걸 확인했으니

백단을 통해 값을 불러와 

콘솔에 찍어보자