240117 TIL - Spring - Vue.js

오늘은 이번에 프론트엔드를 vue.js를 사용하게되면서 vue에 대한 공부를 조금 해본것을 정리해보겠다. 

우선 vue를 사용하기위해 설정을 하는 법은 node.js(npm)을 설치해준후 터미널에서 vue cli를 설치해주면 된다. 설치 확인을 해보려면 터미널에서 vue --verision을 쳤을때

이렇게 나온다면 정상적으로 된 것이다.

그런 뒤 우리 프로젝트에서는 vue화면의 header layout를 설정해준 후 화면을 채워줄 vue component파일을

 

이런식으로 만들어서 화면을 채워주면 된다. 위쪽 <template>에서는 화면을 꾸며주고 아래쪽<script>에서는 api를 호출하고 함수를 정의하는 등의 로직을 적어주면 된다.

그리고

 

router.js 파일에 path에는 매핑할 url을 적어주고 component에는 작성한 vue component파일을 적어주면 해당url을 들어갔을 때 매핑한 component가 나오게 된다.