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

2020. 11. 19. 08:39· 개발
목차
  1. 설치
  2. Reference

 

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 연동하여 환경 구축하기

Vue CLI + Spring Boot 연동하여 환경 구축하기 프론트엔드는 Vue.js로, 백엔드는 Spring Boot를 이용해서 프로젝트를 진행하려고 한다. 스프링에서 Jsp를 통해 view를 구축해봤지만, 이번엔 Vue.js를 활용.

kim6394.tistory.com

velopert.com/1351

 

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

이번 포스트는 기존에 node.js 가 설치 되어있는 상태에서 Node.js 와 NPM 을 최신버전으로 업그레이드 하는 방법에 대한 팁 입니다. 주의: 일부 모듈에선 v6.0.0 을 지원하지 않습니다. # Node.js 업그레

velopert.com

sun-22.tistory.com/28

728x90
반응형

'개발' 카테고리의 다른 글

vs code + spring boot + vue.js 설치 가이드 (4) - 부트스트랩  (0) 2020.11.19
vs code + spring boot + vue.js 설치 가이드 (3) - 프록시 설정  (0) 2020.11.19
vs code + spring boot + vue.js 설치 가이드(1)  (0) 2020.11.18
mxnet graphviz view() 오류  (0) 2020.06.19
__acrt_first_block == header  (0) 2020.06.10
  1. 설치
  2. Reference
'개발' 카테고리의 다른 글
  • vs code + spring boot + vue.js 설치 가이드 (4) - 부트스트랩
  • vs code + spring boot + vue.js 설치 가이드 (3) - 프록시 설정
  • vs code + spring boot + vue.js 설치 가이드(1)
  • mxnet graphviz view() 오류
내공얌냠
내공얌냠
내공냠냠
내공얌냠
내공냠냠
내공얌냠
전체
오늘
어제
  • 분류 전체보기 (254)
    • 개발 (113)
      • mediapipe (16)
      • insightface (5)
      • JongjuAR (3)
    • 자료구조 알고리즘 (79)
      • 코딩테스트 (64)
      • 이론 (15)
    • 공부 (7)
      • 단행본 (7)
      • 튜토리얼 (19)
      • 논문 (15)
      • 복기 (5)
    • 참여 (5)

블로그 메뉴

  • 홈
  • 태그
  • 미디어로그
  • 위치로그
  • 방명록

공지사항

인기 글

태그

  • flutter tutorial
  • 컴퓨터 비전
  • 플러터
  • git tutorial
  • 음성인식 튜토리얼
  • speaker adaptation tts
  • 구글 미디어파이프
  • flutter conference
  • 미디어파이프
  • flutter 행사 후기
  • ios google places api
  • postgresql install in mac
  • kubeflow설치가이드
  • postgresql 재설치
  • python telegrambot
  • 딥러닝 기반 음성인식 기초
  • mediapipe
  • flutter
  • 컴퓨터 비전 기초
  • 음성인식 기초
  • 머신러닝이란
  • 플러터 튜토리얼
  • torchscript vs onnx vs tensorrt
  • 깃 튜토리얼
  • kubeflow설치안됨
  • 컴퓨터 비전 책 추천
  • google mediapipe
  • vscode 스프링 설치
  • flutter 행사
  • mediapipe translate

최근 댓글

최근 글

hELLO · Designed By 정상우.v4.2.2
내공얌냠
vs code + spring boot + vue.js 설치 가이드 (2)
상단으로

티스토리툴바

단축키

내 블로그

내 블로그 - 관리자 홈 전환
Q
Q
새 글 쓰기
W
W

블로그 게시글

글 수정 (권한 있는 경우)
E
E
댓글 영역으로 이동
C
C

모든 영역

이 페이지의 URL 복사
S
S
맨 위로 이동
T
T
티스토리 홈 이동
H
H
단축키 안내
Shift + /
⇧ + /

* 단축키는 한글/영문 대소문자로 이용 가능하며, 티스토리 기본 도메인에서만 동작합니다.