spring boot + gradle + jpa(oracle) + thymeleaf + vuejs

spring boot + gradle + jpa + thymeleaf + vuejs

이게 맞는진 잘 모르겠지만..

아무튼... 내 샘플 프로젝트에서는 저 위에 다섯가지 모든것을 다 활용해보고자 함.

앞서 4가지는 셋팅이 모두 끝났고 vuejs 셋팅하기.

 

1. nodejs 설치하기

vuejs를 설치하기 위해서는 nodejs의 선 설치가 필요함. 

npm install vue 로 설치하기위해서.

nodejs 다운로드 : http://www.nodejs.org

 

2. npm 설치 및 vue 설치 확인하기

node.js를 설치하고나서야 비로소 npm 명령어를 사용할 수 있다.

//1. cmd열어서
npm -v
//버전확인. 나는 6.13.4 확인!

//2. vue 설치
npm install vue
//뭔가 에러인것 같은 아닌것 같은 메세지가 뜨지만 
//자세히 보면 vue@2.6.11이 보임

//3. vue-cli설치
//이게뭐냐 ? vue.js 개발을 위한 시스템..... 뭐 암튼 써보자
npm install --global vue-cli

 

3. 프로젝트에 vue 적용

어렵다... 포기직전... ㅠㅠ

//1. cmd로 기존에 만들어놓은 workspace로 이동
cd workspace/sample

//2. 그다음..
npm install --g vue-cli
vue init webpack frontend
//뭐 많이 시키는데 잘 모르겠어서 일단 엔터엔터엔터...
//그랬더니 뭐 엄청 설치한다.

 

4. 마지막....

//1. 프로젝트를 리프레쉬 하면 frontend라는 폴더가 만들어져있음
//frontend/config/index.js로 이동
//build부분을 찾아서.. 수정
  build: {
    // Template for index.html
    //index: path.resolve(__dirname, '../dist/index.html'),
	index: path.resolve(__dirname, '../../src/main/resources/static/index.html'),

    // Paths
    //assetsRoot: path.resolve(__dirname, '../dist'),
	assetsRoot: path.resolve(__dirname, '../../src/main/resources/static'),
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',

//2. cmd frontend 폴더 에서 run build
npm run build

//그럼 뭐가 쫙쫙쫙 올라가고~~~~~ Build complete.!!!

##########

main\resources\static\index.html

 

여기 수정 하고

브라우저 refresh 하면 반영이 되는듯....

 

일단 성공!

 

title은 처음에 vue init webpack frontend

이거 할때 뭐 입력하라고 한거대로 나오는것 같고...

더 공부해봐야겠다. 뭐가 좋은지 잘 모르겠음... 

controller 연동하는 샘플을 짜야 이해가 될 것 같다.