Installation Vue.js (WebStorm + Vue CLI)

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)을 사용할지 선택하는 단계이다.

Standard : https://github.com/standard/standard
Airbnb : https://github.com/airbnb/javascript

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

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

Jest
Karma and Mocha

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

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