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
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 |