[ Vue ] Backend-Eclipse-Java / Frontend-Atom-Vue 연결하기

 Vue 공부 중 기존 Eclipse프로젝트를 

 Frontend - Atom - Vue  / Backend - Eclipse - Java

형태로 사용이 가능하다는 것을 보고 기본적인 세팅 방법을 확인 및 정리하였습니다.

 

Eclipse 프로젝트는 mvn 형태

 

vue 사용법
1. eclipse 프로젝트 생성or선택

2. cmd -> 해당 프로젝트 폴더 접속
ex) > cd C:\Users\YSY\git\simple-maven\test

3. vue cli로 vue 프로젝트 생성
> vue init webpack [생성할 vue 폴더 이름]

ex) > vue init webpack frontend

4. atom -> Add Project Folder -> 생성한 vue폴더 선택

5. vue 파일 eclipse 프로젝트로 build

5-1) src폴더에 vue 문법에 맞게 코드작성...

(코드작성완료 후)

5-2) config폴더 -> index.js 선택

5-3) build: { ...... } 내부 파일 수정

 ※ build를 통해 .html, .jsp등의 file 생성 위치
index: path.resolve(__dirname, '../dist/index.html'),
 -> index: path.resolve(__dirname, '../../src/main/webapp/WEB-INF/views/sample.jsp'),

※ build 로 생성된 file에 사용되는 css, js저장위치
assetsRoot: path.resolve(__dirname, '../dist'),
assetsSubDirectory: 'static',
assetsPublicPath: '/',
-> assetsRoot: path.resolve(__dirname, '../../src/main/webapp/vue'), // 저장위치
     assetsSubDirectory: 'static',  // 저장시 생성할 서브 폴더명
     assetsPublicPath: '/vue/',  // 프로젝트 webapp후 생성파일까지의 경로

5-4) cmd -> cd 프로젝트폴더/vue폴더 -> npm run build -> eclipse에서 생성 확인

6. eclipse 프로젝트 build or run