Vue.js with Vue-cli 간단한 프로젝트 생성하기

※먼저 Vue CLI를 이용하기 위해선 NodeJS 6.X 이상, npm 3 버전 이상의 환경이 설치 되어 있어야 한다.

 

 

 

CLI란?
Command Line Interface의 약자로서, 텍스트 터미널을 통한 사용자와 컴퓨터의 상호 작용 방식을 의미한다.

 

---

* 현재 노드 버전 12.13.1 lts , vue 버전 2.9.6 *
설치 순서

1. https://nodejs.org/ko/ node.js lts 버전을 설치 한다.

2. 처음 설치 하는 것이므로  exe 를 다운 받는다.

3. 다운 로드 후 CMD에서 아래와 같은 명령어를 통해 잘 설치 되어있는지 확인 한다.

C:\Users\Administrator>node -v
v12.13.1

 

4. 다음은 vue cli 를 설치 한다. 
   설치 방법은 간단하다. 현재 CMD 창에서 아래 와 같이 명령어를 통해 설치한다.

C:\Users\Administrator>npm install -g vue-cli

  결과

npm WARN deprecated vue-cli@2.9.6: This package has been deprecated in favour of @vue/cli
npm WARN deprecated coffee-script@1.12.7: CoffeeScript on NPM has moved to "coffeescript" (no hyphen)
C:\Users\Administrator\AppData\Roaming\npm\vue -> C:\Users\Administrator\AppData\Roaming\npm\node_modules\vue-cli\bin\vue
C:\Users\Administrator\AppData\Roaming\npm\vue-list -> C:\Users\Administrator\AppData\Roaming\npm\node_modules\vue-cli\bin\vue-list
C:\Users\Administrator\AppData\Roaming\npm\vue-init -> C:\Users\Administrator\AppData\Roaming\npm\node_modules\vue-cli\bin\vue-init
+ vue-cli@2.9.6
added 241 packages from 206 contributors in 12.901s

  위의 WARN은 위의 명령어가 구식이므로 deprecated 되었다고 알려주는 것이다.
  지금은 
  npm install @vue/cli-init -g
  라는 명령어를 사용하는 것 같다.

5. 설치가 정상적으로 되었는지 확인해보자

C:\Users\Administrator>vue -v
error: unknown option `-v'

C:\Users\Administrator>vue -h
Usage: vue <command> [options]

Options:
  -V, --version  output the version number
  -h, --help     output usage information

Commands:
  init           generate a new project from a template
  list           list available official templates
  build          prototype a new project
  create         (for v3 warning only)
  help [cmd]     display help for [cmd]

C:\Users\Administrator>vue -V
2.9.6

  vue의 버전 확인은 대문자( -V )를 사용하여야 하는 것을 볼 수 있다.

---

테스트 프로젝트 생성

1. 프로젝트를 넣을 폴더로 들어간다.

D:\>cd test2

2. 해당 폴더로 들어가 프로젝트를 생성해보자

//vue init //template-name //project-name
D:\test2>vue init webpack test-project

  간단한 테스트 용으로만 생성 할 것으로 생성에 우선을 두기 위해 모두 default로 생성하도록 하자.

'git'��(��) ���� �Ǵ� �ܺ� ���, ������ �� �ִ� ���α׷�, �Ǵ�
��ġ ������ �ƴմϴ�.
? Project name test-project //프로젝트 명
? Project description vue.js test project //프로젝트에 대한 설명
? Author sokim // 권한
? Vue build standalone //테스트가 우선이므로 standalone으로 한다.
? Install vue-router? Yes 
? Use ESLint to lint your code? Yes
? Pick an ESLint preset Standard
? Set up unit tests No
? Setup e2e tests with Nightwatch? Yes
? Should we run `npm install` for you after the project has been created? (recommended) npm

  결과

   vue-cli · Generated "test-project".


# Installing project dependencies ...
# ========================

npm WARN deprecated extract-text-webpack-plugin@3.0.2: Deprecated. Please use https://github.com/webpack-contrib/mini-css-extract-plugin
npm WARN deprecated core-js@2.6.10: core-js@<3.0 is no longer maintained and not recommended for usage due to the number of issues. Please, upgrade your dependencies to the actual version of core-js@3.
npm WARN deprecated browserslist@2.11.3: Browserslist 2 could fail on reading Browserslist >3.0 config used in other tools.
npm WARN deprecated bfj-node4@5.3.1: Switch to the `bfj` package for fixes and new features!
npm WARN deprecated json3@3.3.2: Please use the native JSON object instead of JSON 3
npm WARN deprecated fsevents@1.2.9: One of your dependencies needs to upgrade to fsevents v2: 1) Proper nodejs v10+ support 2) No more fetching binaries from AWS, smaller package size
npm WARN deprecated browserslist@1.7.7: Browserslist 2 could fail on reading Browserslist >3.0 config used in other tools.
npm WARN deprecated circular-json@0.3.3: CircularJSON is in maintenance only, flatted is its successor.
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

> chromedriver@2.46.0 install D:\test2\test-project\node_modules\chromedriver
> node install.js

Current existing ChromeDriver binary is unavailable, proceding with download and extraction.
Downloading from file:  https://chromedriver.storage.googleapis.com/2.46/chromedriver_win32.zip
Saving to file: C:\Users\ADMINI~1\AppData\Local\Temp\2.46\chromedriver\chromedriver_win32.zip
Received 781K...
Received 1568K...
Received 2352K...
Received 3136K...
Received 3920K...
Received 4523K total.
Extracting zip contents
Copying to target path D:\test2\test-project\node_modules\chromedriver\lib\chromedriver
Done. ChromeDriver binary available at D:\test2\test-project\node_modules\chromedriver\lib\chromedriver\chromedriver.exe

> core-js@2.6.10 postinstall D:\test2\test-project\node_modules\core-js
> node postinstall || echo "ignore"

Thank you for using core-js ( https://github.com/zloirock/core-js ) for polyfilling JavaScript standard library!

The project needs your help! Please consider supporting of core-js on Open Collective or Patreon:
> https://opencollective.com/core-js
> https://www.patreon.com/zloirock

Also, the author of core-js ( https://github.com/zloirock ) is looking for a good job -)


> uglifyjs-webpack-plugin@0.4.6 postinstall D:\test2\test-project\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 ajv-keywords@2.1.1 requires a peer of ajv@^5.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.9 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.9: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

added 1440 packages from 1031 contributors and audited 12902 packages in 43.753s
found 21 vulnerabilities (2 low, 6 moderate, 12 high, 1 critical)
  run `npm audit fix` to fix them, or `npm audit` for details


Running eslint --fix to comply with chosen preset rules...
# ========================


> test-project@1.0.0 lint D:\test2\test-project
> eslint --ext .js,.vue src test/e2e/specs "--fix"


# Project initialization finished!
# ========================

To get started:

  cd test-project
  npm run dev

Documentation can be found at https://vuejs-templates.github.io/webpack

 

3. 프로젝트를 실행해보자

D:\test2\test-project>npm run dev

  결과

> test-project@1.0.0 dev D:\test2\test-project
> webpack-dev-server --inline --progress --config build/webpack.dev.conf.js

 13% building modules 26/31 modules 5 active ...x=0!D:\test2\test-project\src\App.vue{ parser: "babylon" } is deprecated; we now treat it as { parser: "babel" }.
 95% emitting

 DONE  Compiled successfully in 4118ms                                                                                                  16:21:53

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

 실행 하면 친절히 http://localhost:8080 으로 접속 하라고 나온다.

4. 접속 해보자 

vue.js run

5. 끝내는 것은 당황하지 말고 CMD 이므로 Ctrl+C를 누르고 

일괄 작업을 끝내시겠습니까 (Y/N)? Y

이렇게 끝내주면 됩니다.

---

 

※기타 참고 사항

 

IDE

 

Atom도 사용한다고 하지만 

Visual Studio Code 를 많이 쓴다고 한다.  https://code.visualstudio.com/
개발을 위한 플러그인의 지원이 마이크로소프트 배후에 있다 보니 빠르고 보다 정확한 지원으로 인해 제일 많이 사용된다고 한다.

크롬 확장 프로그램
https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd|

Vue.js devtools

이 확장 프로그램을 사용하게 되면 vue 소스를 보다 편하게 볼수 있게 해줍니다.

 

vue devtools

끝~~~~~~~~~