vs code + spring boot + vue.js 설치 가이드 (2)

 

web-inf 폴더 만들고 거기에 하도록 해야하는데 그건 조금 있다가 설정하고 일단 vue.js 를 빨리 붙여봐야겠다.

설치

4. vue-cli 

vscode 에서 view > terminal 에서 아래 명령어 입력하여 설치

(1) 에서 설치한 npm을 이용한다.

 npm i -g @vue/cli

업데이트 하라고 해서 해준다.

npm, node 업데이트 해줘라

$ npm i -g npm
$ node -v
$ sudo npm cache clean -f
$ sudo npm install -g n
$ sudo n stable
$ node -v

src 폴더 들어가서 vue 프로젝트 생성. 이름은 frontend 라고 했다

$ vue create frontend

보여지는 대로 해본다

cd frontend
npm run serve

이제 빌드를 해본다

npm run build

빌드까지 했다

frontend 폴더 하위에 vue.config.js 파일을 아래의 내용으로 만든 후 다시 빌드하면

지정한 경로로 css, img, js 폴더, index.html 파일들이 생성된다. 

module.exports = {
    outputDir: "../main/resources/static",
    indexPath: "../static/index.html"
}

스프링 다시 실행하고, 뷰도 다시 실행한다

./mvnw spring-boot:run
npm run serve

필자는 터미널 오른쪽에 이렇게 띄울 수 있는 것으로 진행하고 있었다.

스프링을 실행하면 포트가 겹친다고 나오는데 그러면 바꿔주자.

뷰 실행 후 보여지는 주소로 접속해본다

 

쨘

 

 

Reference

kim6394.tistory.com/218

Vue CLI + Spring Boot 연동하여 환경 구축하기

velopert.com/1351

[Node.js] TIP: Node.js 와 NPM 최신버전으로 업그레이드 하기 | VELOPERT.LOG

sun-22.tistory.com/28