Installation Vue.js (Eclipse)

Posted at 2018. 5. 24. 21:32 | Posted in Study/Vue.js
반응형

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



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



반응형

'Study > Vue.js' 카테고리의 다른 글

Installation Vue.js (WebStorm + Vue CLI)  (0) 2018.05.21
//