Eclipse 에 Vue.js 플러그인 설치 방법
백엔드는 Spring 으로 되어 있고 프론트엔드는 Vue.js 로 되어 있을 때,
Visual Studio Code 를 사용하지 않고 Eclipse 하나로 백엔드/프론트엔드를 개발하는 방법.
1. 사전준비
본 포스트는 아래 작업이 모두 완료되었음을 전제로 한다.
(1) Eclipse 다운로드 및 설치
(2) JDK 다운로드 및 설치
(3) Node.js 다운로드 및 설치
(4) npm 사용을 위한 Node.js 경로의 환경변수 설정
cf) cmd 에서 npm 명령어 실행했을 때 아래 그림과 같이 인식되면 정상
(5) Vue-cli 설치 (cmd 에서 npm install을 이용하여 vue-cli 설치)
2. vue.js 플러그인 설치
이클립스 상단 메뉴의 [Help] – [Eclipse Marketplace] 선택
vue 로 검색, Vue.js :: CodeMix 를 찾아서 [Install] 버튼 클릭하여 설치
Vue 프로젝트로 생성된 폴더 위에서 마우스 우클릭 – [Show In] – [Terminal] 클릭
하단에 만들어진 Terminal 콘솔에 명령어 입력
ex1) npm install => 노드 패키지 설치
ex2) npm run build => 빌드 수행 (ex : build.min.js 를 생성)
ex3) npm run dev => 테스트 서버를 띄움
3. Vue 파일 글자색 하이라이트 적용 방법
위와 같이 확장자 vue인 파일의 글자색이 하이라이트 되지 않는 경우
이클립스 상단 메뉴의 [Window] – [Preferences] 클릭
Preferences 창에서 좌측 메뉴의 [General] – [Context Types] 선택
우측 내용의 [Text] – [HTML] 선택 – [add…] 버튼 클릭
[*.vue] 입력 후 [OK] 버튼 클릭
*.vue 항목을 클릭하고 하단의 Default encoding 값 [UTF-8]로 입력하고
우측의 [Update] 버튼 클릭
마지막으로 [Apply and Close] 버튼 클릭
하이라이트가 잘 적용되었음을 볼 수 있음.