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
//

Installation Vue.js (WebStorm + Vue CLI)

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

Introduction


WebStorm + Vue CLI를 이용해서 Vue.js 개발 환경을 구축해보자.


Vue.js는 단일 페이지 응용 프로그램을 빠르게 스캐폴딩하기 위한 공식 CLI를 제공합니다. 현대적인 프론트엔드 워크플로우를 위해 잘 구성된 빌드 설정을 제공합니다. 핫 리로드, lint-on-save 및 프로덕션 준비가 된 빌드로 시작하고 실행하는데 몇 분 밖에 걸리지 않습니다.


처음 CLI 를 접하기 전에 사전 지식을 필요로 하니 당장 Vue.js 만 공부하려면 순수 HTML, CSS, Javascript 로 구성해서 학습하는 것도 괜찮을 것 같다. (난 사전 지식 없는데 왜 이걸로 하고 있지... ㅠㅠ)


CLI는 Node.js 및 관련 빌드 도구에 대한 사전 지식을 필요로 합니다. Vue 또는 프런트엔드 빌드 도구를 처음 사용하는 경우 CLI를 사용하기 전에 빌드 도구없이 가이드를 읽어 보시기 바랍니다.




Preparation


Node.js가 필요하다. 다운로드 받은 후 환경변수 PATH 등록 해두자.



vue-cli 를 설치한다.


D:\>npm install --global vue-cli
npm WARN deprecated coffee-script@1.12.7: CoffeeScript on NPM has moved to "coffeescript" (no hyphen)
D:\develoment\tools\node-v8.11.2-win-x64\vue-list -> D:\develoment\tools\node-v8.11.2-win-x64\node_modules\vue-cli\bin\vue-list
D:\develoment\tools\node-v8.11.2-win-x64\vue -> D:\develoment\tools\node-v8.11.2-win-x64\node_modules\vue-cli\bin\vue
D:\develoment\tools\node-v8.11.2-win-x64\vue-init -> D:\develoment\tools\node-v8.11.2-win-x64\node_modules\vue-cli\bin\vue-init
+ vue-cli@2.9.3
added 258 packages in 27.115s




Create Vue.js Project


WebStorm 실행 후 프로젝트를 새로 생성한다.




Location: 프로젝트의 디렉터리

Node interpreter : node.exe 파일의 위치

vue-cli or @vue/cli: vue-cli 모듈의 위치. 위에서 vue-cli 를 설치 했으면 자동으로 인식 된다.

Project template: 만들어질 프로젝트 기본 템플릿 6가지

  • browserify : hot-reload, linting 및 단위 테스팅 등 대부분의 기능을 갖춘 Browserify + vueify 설정.
  • browserify-simple : 단순히 Browserify와 vueify만 포함. 빠르게 프로토타입을 만들 때 사용한다.
  • pwa : ot-reload, linting, 테스트 및 CSS 추출 기능을 갖춘 대부분의 기능을 갖추고 있는 Webpack + PWA 템플릿.
  • simple : 가장 단순하게 한 HTML 파일에 Vue 설정을 담고 있다.
  • webpack : hot-reload, linting, 테스트 및 CSS 추출 기능을 갖춘 대부분의 기능을 갖추고 있는 Webpack + vue-loader 설정.
  • webpack-simple : 단순히 Webpack과 vue-loader만 포함한다. 빠르게 프로토타입을 만들 때 사용한다.




프로젝트 이름...




프로젝트 설명...




작성자 이름...




Vue build

  • Runtime + Compiler : 일반 적인 대부분 사용자에게 권한다.
  • Runtime-only : 약 6KB 안되는 용량. 하지만 템플릿(.vue)만 사용할 수 있다.

개발 중에는 최소화 버전을 사용하지 마십시오. 일반적인 실수에 대한 모든 훌륭한 경고를 놓치게됩니다!


현재는 개발(공부) 용도이기 때문에 Runtime + Compiler 선택...




해시(#) URL이나 HTML5 History 등을 이용하여 SPA에서 페이지 네비게이션 기능을 vue.js에서 사용하고 싶을 때 쓰는 vue-router 모듈을 설치할 것인지 여부이다.




자바스크립트 코딩 스타일과 에러를 체크하는 ESLint를 사용할 지 여부.




ESLint 를 사용한다면 어떤 코딩 스타일 세팅(preset)을 사용할지 선택하는 단계이다.




단위 테스트를 사용할 지 여부.




어떤 테스트기(test runner)를 사용할 지 선택한다.




Nightwatch를 이용하여 e2e(End-to-End) 테스트를 할 수 있도록 설정할 것인지 여부.




프로젝트가 생성된 후에 NPM 을 사용할 것인지 물어본다...




이제 프로젝트가 만들어졌다.


IDE 우측 하단의 알람을 보면 종속 모듈을 설치해야 한다고 한다. Run 'npm install' 을 클릭 하거나 Terminal 에서 직접 커맨드를 입력해서 설치하면 된다.



Terminal 에서 직접 npm install 했을 때 내용은 대충... 아래와 같다.


>npm install
npm WARN deprecated socks@1.1.10: If using 2.x branch, please upgrade to at least 2.1.6 to avoid a serious bug with socket data flow and an import issue introduced in 2.1.0
npm WARN notice [SECURITY] mime has 1 moderate vulnerability. Go here for more details: https://nodesecurity.io/advisories?search=mime&version=1.3.6 - Run `npm i npm@latest -g` to upgrade your npm version, and then `
npm audit` to get more info.
npm WARN notice [SECURITY] https-proxy-agent has 1 high vulnerability. Go here for more details: https://nodesecurity.io/advisories?search=https-proxy-agent&version=1.0.0 - Run `npm i npm@latest -g` to upgrade your n
pm version, and then `npm audit` to get more info.
npm WARN notice [SECURITY] http-proxy-agent has 1 high vulnerability. Go here for more details: https://nodesecurity.io/advisories?search=http-proxy-agent&version=1.0.0 - Run `npm i npm@latest -g` to upgrade your npm
 version, and then `npm audit` to get more info.
npm WARN notice [SECURITY] debug has 1 low vulnerability. Go here for more details: https://nodesecurity.io/advisories?search=debug&version=2.2.0 - Run `npm i npm@latest -g` to upgrade your npm version, and then `npm
 audit` to get more info.
npm WARN notice [SECURITY] macaddress has 1 critical vulnerability. Go here for more details: https://nodesecurity.io/advisories?search=macaddress&version=0.2.8 - Run `npm i npm@latest -g` to upgrade your npm version
, and then `npm audit` to get more info.
npm WARN notice [SECURITY] growl has 1 critical vulnerability. Go here for more details: https://nodesecurity.io/advisories?search=growl&version=1.9.2 - Run `npm i npm@latest -g` to upgrade your npm version, and then
 `npm audit` to get more info.

> chromedriver@2.38.3 install D:\dev\projects\vue\node_modules\chromedriver
> node install.js

Downloading https://chromedriver.storage.googleapis.com/2.38/chromedriver_win32.zip
Saving to C:\Users\Antop\AppData\Local\Temp\chromedriver\chromedriver_win32.zip
Received 781K...
Received 1568K...
Received 2352K...
Received 3136K...
Received 3299K total.
Extracting zip contents
Copying to target path D:\dev\projects\vue\node_modules\chromedriver\lib\chromedriver
Done. ChromeDriver binary available at D:\dev\projects\vue\node_modules\chromedriver\lib\chromedriver\chromedriver.exe

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

npm notice created a lockfile as package-lock.json. You should commit this file.
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 1555 packages in 321.2s




Run Server


Terminal 에서 npm run dev 명령어 입력.


D:\develoment\projects\vue.js>npm run dev

> vue.js@1.0.0 dev D:\develoment\projects\vue.js
> webpack-dev-server --inline --progress --config build/webpack.dev.conf.js

 90% chunk assets processing


% 진행 되다가 아래와 같이 나오면 성공!


 DONE  Compiled successfully in 15419ms                                                                                                                                                                            12:50:43

 I  Your application is running here: http://localhost:8080


브라우저로 접속 시 화면이 나온다면 성공!





Reference


https://kr.vuejs.org/v2/guide/installation.html

https://www.jetbrains.com/help/webstorm/vue-js.html

https://github.com/vuejs-kr/vue-cli

반응형

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

Installation Vue.js (Eclipse)  (0) 2018.05.24
//