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 [1m[34mhttp://localhost:8080/[39m[22m
webpack output is served from [1m[34m/dist/[39m[22m
404s will fallback to [1m[34m/index.html[39m[22m브라우저가 자동으로 실행되고 아래와 같이 나온다면 성공!
'Study > Vue.js' 카테고리의 다른 글
| Installation Vue.js (WebStorm + Vue CLI) (0) | 2018.05.21 |
|---|
