Vue.js 설치 및 프로젝트 생성

리액트와 함께 인기를 더해가는 vue.js 사용을 위한 기본 설치 과정을 설명하도록 한다. 우선 기본이 되는 vue 설치를 위해서는 아래와 같이 npm 명령어를 사용하도록 한다.

$ npm install vue
npm WARN saveError ENOENT: no such file or directory, open '/Users/caley/package.json'
npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN enoent ENOENT: no such file or directory, open '/Users/caley/package.json'
npm WARN caley No description
npm WARN caley No repository field.
npm WARN caley No README data
npm WARN caley No license field.

+ vue@2.5.17
added 1 package from 1 contributor and audited 1 package in 1.232s
found 0 vulnerabilities

설치가 끝났으면 공식 CLI 를 설치하면 끝이다.

$ npm install --global vue-cli
npm WARN deprecated coffee-script@1.12.7: CoffeeScript on NPM has moved to "coffeescript" (no hyphen)
/usr/local/bin/vue -> /usr/local/lib/node_modules/vue-cli/bin/vue
/usr/local/bin/vue-init -> /usr/local/lib/node_modules/vue-cli/bin/vue-init
/usr/local/bin/vue-list -> /usr/local/lib/node_modules/vue-cli/bin/vue-list
+ vue-cli@2.9.6
added 237 packages from 206 contributors in 9.236s

설치가 완료되면 CLI 를 통해 바로 vue.js 를 활용할 수 있다. 아래와 같이 vue 명령어를 살펴보자.

$ vue
Usage: vue  [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]

옵션에서 init 을 통해 새로운 프로젝트를 생성할 수 있다는 사실을 알 수 있다. init 옵션을 보면 다음과 같다.

$ vue init
Usage: vue-init  [project-name]

Options:
  -c, --clone  use git clone
  --offline    use cached template
  -h, --help   output usage information
  Examples:

    # create a new project with an official template
    $ vue init webpack my-project

    # create a new project straight from a github template
    $ vue init username/repo my-project

예제처럼 우리의 프로젝트를 만들어보도록 한다. 중간에 Y/n 선택지에 대해서는 향후 변경이 가능하며 당장 중요한 포인트가 아니기 때문에 적당히 default 를 선택해도 된다.

$ vue init webpack my-project

? Project name my-project
? Project description A Vue.js project
? Author jybaek 
? Vue build 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 "my-project".


# Installing project dependencies ...
# ========================
....
....
# Project initialization finished!
# ========================

To get started:

  cd my-project
  npm run dev

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

화면에 명시된 것처럼 실행시키면 브라우저에서 우리의 프로젝트를 확인 할 수 있게 된다.

$ cd my-project/;npm run dev

> my-project@1.0.0 dev /Users/caley/work/my-project
> webpack-dev-server --inline --progress --config build/webpack.dev.conf.js

 95% emitting

 DONE  Compiled successfully in 2307ms                                                                                                                                  

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

http://localhost:8080 으로 접속해보자 ! 

우리의 첫번째 프로젝트를 화면에 띄우는데 성공했다. 자축하도록 하자. :-)