(Vue.js환경 만들기 3) Springboot + Vue create

Springboot는 이때까지 작업한 MySpringbootApi 를 사용해볼것

(안되면 새로 만들어야함..)

vue cli로 src 디렉토리 아래에 vue.js 프로젝트를 하나 만들어 볼것이다

 

 

 

1. Vue create

---

 

vue create 기능은 CLI 3.xx 버전부터 지원한다고 한다.. 바로 이전에 2.xx버전을 다운받았지만

참고하는 글과 같은 환경을 만들기 위해서 npm을 uninstall하고 다시 install 한다

(여기선 Vue3버전을 사용했지만 Vue 2버전을 설치하자..)

 

다시 Springboot 프로젝트의 src아래에 vue create frontend를 생성하자

-> default로 시작하면 새로운 프로젝트가 시작된다

 

---

만약 intellij Terminal에서 vue 버전을 확인할때 오류가 난다면?

 

관리자모드 window PowerShell 에서 권한설정을 바꿔주자

• Set-ExecutionPolicy RemoteSigned      -> 권한상태를 RemoteSigned로 변경
• get-ExecutionPolicy                          -> 권한이 변경되었는지 확인

정상적으로 버전확인이 된다

 

---

default로 프로젝트를 생성 후 

frontend 디렉토리에 들어가서 npm run serve 명령어를 실행하면 실행되는 것을 볼수있다

그런데 실행했더니 vue가 localhost:8081번 포트를 사용한다. 

 

이대로 시작하면 vue를 이용해 client쪽 페이지 구성을 바꿀 때마다 매번 다시 build하고, 나온 결과물들을 resources/static으로 이동하는 번거로운 작업을 해야한다. 게다가 개발 서버를 spring과 vue 각각 하나씩 띄워야 하니, 사진과 같이 port 번호도 두 개로 나누어 작업해야 한다. (vue 8081 , spring 8080)

 

8081번 포트를 받은 vue

 

 

 

 

 

 

[많이 참고한 블로그 : https://deockstory.tistory.com/26]