Installation Vue.js (Eclipse)

Introduction

Eclipse 에서 Vue.js 개발 환경을 구축해보자.

---

Preparation

이클립스는 JavaScript and Web Developers 패키지로 받았다.

npm을 어디서든사용할 수 있도록 nodejs를 받아서 Path 환경 변수에 등록하자.

---

Install CodeMix Plugin

Eclipse Marketplace(Help - Eclipse Marketplace...)에서 vue를 검색하면 플러그인이 나온다. (하나만 있는듯? -_-)

With CodeMix, unlock a wide array of technologies from Visual Studio Code and add-on extensions built for Code OSS directly inside your Eclipse IDE.

- First class JavaScript coding & debugging

- Vastly improved HTML and CSS editing

- New languages including TypeScript, PHP and Python

- New frameworks from React and Vue.js to Angular

- New UX patterns like the Quick Open shortcuts

- As-you-type content assist

라이선스.. 네네...

설치 후 재시작 해준다.

재시작 하면 CodeMix 에 대한 설명+설정이 나온다.

---

Create Vue project

File - New - Project

프로젝트 이름 입력 후 Finish

아래와 같은 구조로 프로젝트가 만들어진다.

프로젝트에서 마우스 오른쪽 버튼 - Run As - npm Install 클릭.

프로젝트에 필요한 모듈들을 설치하게 된다.

Microsoft Windows [Version 10.0.16299.309]
(c) 2017 Microsoft Corporation. All rights reserved.

D:\dev\workspace\vue.js>npm install

> node-sass@4.9.0 install D:\dev\workspace\vue.js\node_modules\node-sass
> node scripts/install.js

Cached binary found at C:\Users\Antop\AppData\Roaming\npm-cache\node-sass\4.9.0\win32-x64-57_binding.node

> uglifyjs-webpack-plugin@0.4.6 postinstall D:\dev\workspace\vue.js\node_modules\uglifyjs-webpack-plugin
> node lib/post_install.js


> node-sass@4.9.0 postinstall D:\dev\workspace\vue.js\node_modules\node-sass
> node scripts/build.js

Binary found at D:\dev\workspace\vue.js\node_modules\node-sass\vendor\win32-x64-57\binding.node
Testing binary
Binary is fine
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.4 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.4: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

added 891 packages in 151.496s

D:\dev\workspace\vue.js>exit

node_modules 라는 디렉터리가 생성되고 하위에 필요한 모듈들이 들어있다. (이 디렉터리는 VCS에 포함시키지 말자!)

package.json - dev 에서 마우스 오른쪽 버튼. Run As - npm Script

아래와 같이 Console이 나오게 된다.

Microsoft Windows [Version 10.0.16299.309]
(c) 2017 Microsoft Corporation. All rights reserved.

D:\dev\workspace\vue.js>npm run-script dev

> vue-hello-world@1.0.0 dev D:\dev\workspace\vue.js
> cross-env NODE_ENV=development webpack-dev-server --open --hot

Project is running at http://localhost:8080/
webpack output is served from /dist/
404s will fallback to /index.html

브라우저가 자동으로 실행되고 아래와 같이 나온다면 성공!