[vue.js] eclipse에서 vue.js 시작하기 

이번 글에서는 이클립스에서 vue.js를 사용하는 방법에 대한 튜토리얼을 작성해 보겠습니다.
Windows 10 환경에서 진행하였습니다.

 

Eclipse 다운로드

http://www.eclipse.org/downloads/eclipse-packages/ 에서 이클립스를 다운로드 합니다.
vue.js만 사용하기 위한 목적이므로 "Eclipse IDE for JavaScript and Web Developers"를 다운로드 하셔도 무방합니다만
"Eclipse IDE for Java EE Developers"를 다운로드 하시는 것을 추천 드립니다. (Spring boot 등 Spring을 이용하시려면 반드시 해당 버전을 다운받으세요.)
Installer를 다운로드 하셔도 됩니다. 저는 package를 다운로드 하는 것을 선호 해서 zip 파일로 된 패키지를 다운로드 하였습니다.
아래 내용은 package를 다운로드하여 설치하는 방법에 대해서만 적었습니다.
버전은 Eclipse photon으로 다운받았습니다. 불과 얼마전까지만 해도 oxyzen 이었는데... 벌써 새로운 버전이 나왓네요... 존경합니다.

OS 환경에 맞춰서 다운로드 하시면 됩니다.

다운로드된 zip 파일의 압축을 풉니다. (실행은 JDK를 설치 후 실행합니다.)

 

JDK 다운로드

Eclipse photon 버전은 JDK 8 이상 설치되어 있어야 합니다.

http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html 에서 JDK를 다운로드합니다.

OS 환경에 맞게 다운로드 하시면 됩니다.

installer이므로 설치 방법은 생략하겠습니다. (그냥 next만 누르시면 됩니다 ㅎㅎ)

 

Eclipse 실행

압축을 푼 디렉토리 내 eclipse.exe를 실행합니다.

Workspace는 default 설정을 그대로 사용했습니다. (원하는 디렉토리 생성 후 사용하셔도 무방합니다.)

 

Node 다운로드

npm을 사용하기 위해 Node를 다운로드 합니다.

https://nodejs.org/ko/download/ 에서 LTS 버전의 "Windows Binary (.zip)" 패키지를 다운받았습니다.
Installer를 다운로드하셔도 무방합니다.

OS버전에 맞게 다운로드하시면 됩니다.

압축을 풉니다.

 

NPM 사용을 위한 환경변수 설정

어디서나 npm을 사용하기 위해 환경변수를 설정합니다.

경축! 아무것도 안하여 에스천사게임즈가 새로운 모습으로 재오픈 하였습니다.
어린이용이며, 설치가 필요없는 브라우저 게임입니다.
https://s1004games.com

번호 순서대로 클릭합니다.
노드 디렉토리를 환경변수로 새로 등록 후 확인 버튼을 클릭하여 등록합니다.
CMD 실행 후 npm을 실행했을 때 다음과 같이 나오면 환경변수가 정상적으로 설정 된것입니다.만약 제대로 경로를 설정해도 실행이 안된다면 윈도우를 다시시작 해보세요

 

vue-cli 설치

CMD에서 npm install을 이용하여 vue-cli를 설치합니다.

# npm install -g vue-cli

 

Vue.js 플러그인 설치

이클립스의 플러그인인 codmix의 vue.js 플러그인을 설치합니다.

Help > Eclipse Marketplace... 를 클릭합니다.
vue를 검색하여 vue.js 플러그인을 설치합니다. (설치와 관련된 캡쳐는 생략했습니다.)

 

프로젝트 생성

vue.js 프로젝트를 생성합니다.

Project Explorer 에서 오른쪽 클릭 후 New > Project... 를 실행합니다.
CodeMix > Vue Project 선택 후 Project name을 입력하여 프로젝트를 생성합니다.

 

Vue 실행

이클립스의 터미널을 실행합니다. CMD를 사용하여도 무방합니다만 프로젝트의 경로를 자동으로 잡아주므로 이클립스에서 실행하는게 편리하다 생각됩니다. 

프로젝트 우클릭 > Show in Local Terminal > Terminal 실행
npm install을 실행합니다. (만약 npm install이 실행되지 않을 경우 환경변수를 확인하거나 윈도우를 재시작한 후 시도해보세요.)
npm run dev를 실행합니다.
localhost:8080 접속 하여 그림과 같이 표시되면 정상 실행된 것입니다.


위 그림과 같이 Hello World 화면이 나타나면 정상 기동된 것입니다.

 

 

 

 

본 웹사이트는 광고를 포함하고 있습니다.
광고 클릭에서 발생하는 수익금은 모두 웹사이트 서버의 유지 및 관리, 그리고 기술 콘텐츠 향상을 위해 쓰여집니다.
번호 제목 글쓴이 날짜 조회 수
41 Responsive Web ① – 반응형 웹을 위해 개발자가 꼭 알아야 하는 기술들 file 졸리운_곰 2019.02.08 325
40 서버 사이드 렌더링 그리고 클라이언트 사이드 렌더링 file 졸리운_곰 2018.11.02 800
39 무료 디자인소스 홈페이지들을 소개합니다! file 졸리운_곰 2018.02.27 516
38 스토리보드 템플릿 file 졸리운_곰 2017.10.10 625
37 [웹 기획] 화면 설계 용어 - 와이어프레임, 스토리보드, 프로토타입의 차이점 file 졸리운_곰 2017.10.10 1584
36 웹기획 탄탄한 홈페이지 설계방법 (스토리보드 다운로드) file 졸리운_곰 2017.10.10 2062
35 정보설계(IA : Information Architecture) 졸리운_곰 2016.11.20 329
34 정보 설계 — 웹 사이트 기획 file 졸리운_곰 2016.11.20 756
33 웹 서비스 구축 체크리스트 file 졸리운_곰 2016.10.30 608
32 반응형 웹 기획 file 졸리운_곰 2016.10.27 672
31 [UX 컨설팅] 모 전자 서비스 사례 보고서 secret 졸리운_곰 2016.10.09 0
30 [웹 기획] 기획자가 화면설계서(스토리보드)를 만든다구요? 기획자가 무슨 능력을 가지고 있는데요? 졸리운_곰 2016.10.09 484
29 [UX 디자인] UI 설계도에 해당하는 용어들 file 졸리운_곰 2016.10.09 530
28 [UX 디자인 사례] T모 소프트 "BUX컨설팅소개_V.1.0" file 졸리운_곰 2016.10.09 255
27 [UX 디자인] 사용자 경험(UX)과 사용자 경험 디자인(UX Design) - 위키피디아 정의 살펴보기 file 졸리운_곰 2016.10.08 289
26 [UX 디자인] UX 디자인 조직의 구조와 역할 file 졸리운_곰 2016.10.08 481
25 [UX 디자인] UX 디자인이란? - UI, UX, 인터랙션 디자인의 정의 file 졸리운_곰 2016.10.08 487
24 [UX 디자인] UX(User Experience) 란? UX 디자인 관련 다이어그램 Best 14 file 졸리운_곰 2016.10.08 584
23 [UX 디자인] 7단계 인간행위 모형 - 터치 기기 사용의 행위 모형 file 졸리운_곰 2016.10.08 533
22 [UX 디자인] 애플의 디자인 방법 file 졸리운_곰 2016.10.08 631
대표 김성준 주소 : 경기 용인 분당수지 U타워 등록번호 : 142-07-27414
통신판매업 신고 : 제2012-용인수지-0185호 출판업 신고 : 수지구청 제 123호 개인정보보호최고책임자 : 김성준 sjkim70@stechstar.com
대표전화 : 010-4589-2193 [fax] 02-6280-1294 COPYRIGHT(C) stechstar.com ALL RIGHTS RESERVED