- 전체
- HTML
- Web Design (웹디자인)
- XE 응용 개발
- wordpress plugin dev
- Javascript & JavaScript Application
- MEAN Stack : full stack javascript
- angular js & ionic framework
- bootstrap
- WebGL, Three.js and Babylon.js
- restful api design
- mobile web
- node.js 응용
- Cloud Service 응용
- 웹 어셈블리 개발 [WASM, WebAssembly]
- 마이크로서비스, MSA (microservice architecture)
- WebGL / WebGPU
- next.js 개발
- micro frontend (마이크로프론트앤드)
- 전자상거래/쇼핑몰
- 서버 클라우드 (aws, azure, google)
JavaScript [vue.js] eclipse에서 vue.js 시작하기
2018.09.18 19:46
[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 이었는데... 벌써 새로운 버전이 나왓네요... 존경합니다.
다운로드된 zip 파일의 압축을 풉니다. (실행은 JDK를 설치 후 실행합니다.)
JDK 다운로드
Eclipse photon 버전은 JDK 8 이상 설치되어 있어야 합니다.
http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html 에서 JDK를 다운로드합니다.
installer이므로 설치 방법은 생략하겠습니다. (그냥 next만 누르시면 됩니다 ㅎㅎ)
Eclipse 실행
압축을 푼 디렉토리 내 eclipse.exe를 실행합니다.
Workspace는 default 설정을 그대로 사용했습니다. (원하는 디렉토리 생성 후 사용하셔도 무방합니다.)
Node 다운로드
npm을 사용하기 위해 Node를 다운로드 합니다.
https://nodejs.org/ko/download/ 에서 LTS 버전의 "Windows Binary (.zip)" 패키지를 다운받았습니다.
Installer를 다운로드하셔도 무방합니다.
압축을 풉니다.
NPM 사용을 위한 환경변수 설정
어디서나 npm을 사용하기 위해 환경변수를 설정합니다.
vue-cli 설치
CMD에서 npm install을 이용하여 vue-cli를 설치합니다.
Vue.js 플러그인 설치
이클립스의 플러그인인 codmix의 vue.js 플러그인을 설치합니다.
프로젝트 생성
vue.js 프로젝트를 생성합니다.
Vue 실행
이클립스의 터미널을 실행합니다. CMD를 사용하여도 무방합니다만 프로젝트의 경로를 자동으로 잡아주므로 이클립스에서 실행하는게 편리하다 생각됩니다.
광고 클릭에서 발생하는 수익금은 모두 웹사이트 서버의 유지 및 관리, 그리고 기술 콘텐츠 향상을 위해 쓰여집니다.
