Vue CLI 3 사용법

2018년 8월 10일 Vue CLI 3가 정식 릴리즈되었습니다.

Github 릴리즈 페이지: https://github.com/vuejs/vue-cli/releases
Evan You의 포스팅: https://medium.com/the-vue-point/vue-cli-3-0-is-here-c42bebe28fbb

Vue CLI는 React의 create-react-app처럼 Vue 프로젝트를 손쉽게 만들 수 있도록 도와주는 커맨드 라인 도구 입니다. 이번 포스팅에서는 Vue CLI 3 사용법에 대해서 간단하게 알아보도록 하겠습니다.

Vue CLI 3 설치

Vue CLI 패키지 이름이 바뀌었습니다. 기존 Vue CLI 2는 vue-cli 였는데, 이번 Vue CLI 3는 @vue/cli라는 새로운 패키지 이름을 사용하고 있습니다. 참고로 @ 마크는 NPM에 최근에 도입된 Scoped package를 의미합니다.

먼저 기존에 Vue CLI 2를 사용하고 있었다면, vue라는 커맨드의 네임스페이스가 꼬일지도 모르니 Vue CLI 2를 제거하겠습니다.

$ npm r -g vue-cli

그리고 Vue CLI 3를 전역으로 설치합니다.

$ npm i -g @vue/cli
$ vue --version
3.0.0

위와 같이 3으로 시작하는 버전이 확인되면 설치가 완료된 것입니다.

프로젝트 생성

새로운 프로젝트를 생성해보겠습니다. 저는 프로젝트 이름으로 hello-vue-cli을 사용하겠습니다.

$ vue create hello-vue-cli
Vue CLI v3.0.0
? Please pick a preset: (Use arrow keys)
❯ default (babel, eslint)
  Manually select features

위와 같이 디폴트 설정으로 갈지 매뉴얼하게 옵션을 선택할지 나오는데요. 나중에 언제든지 옵션 추가가 가능하기 때문에 그냥 디폴트 설정을 선택하겠습니다.

✨  Creating project in /work/temp/hello-vue-cli.
🗃  Initializing git repository...
⚙  Installing CLI plugins. This might take a while...
(... 생략 ...)
🎉  Successfully created project hello-vue-cli.
👉  Get started with the following commands:

 $ cd hello-vue-cli
 $ npm run serve

그러면 귀여운 아이콘들이 나오면서 프로젝트 생성이 진행되고 금방 설치가 완료됩니다.

개발 서버 구동

시키는대로 프로젝트 디렉터리로 들어가서 NPM 커맨드를 날리면 순식간에 웹팩 개발 서버가 구동됩니다. npm run serve 커맨드는 내부적으로 웹팩 개발 서버인 webpack-dev-server를 사용합니다. (웹팩 개발 서버에 대한 부연 설명은 관련 포스팅를 참고바랍니다.)

$ cd hello-vue-cli
$ npm run serve

> hello-vue-cli@0.1.0 serve /work/temp/hello-vue-cli
> vue-cli-service serve

 INFO  Starting development server...
 98% after emitting CopyPlugin
 DONE  Compiled successfully in 2094ms                                  15:09:40


  App running at:
  - Local:   http://localhost:8080/
  - Network: http://10.2.120.137:8080/

  Note that the development build is not optimized.
  To create a production build, run npm run build.

역시 시키는대로 브라우저에서 http://localhost:8080/에 접속해보면 Vue 로고가 뚜둥 뜨면서 Welcome to Your Vue.js App라는 메시지를 보실 수 있을 겁니다.

여기서 놀랍게도 npm install 커맨드를 통해 NPM 패키지를 설치하지 않았는데도 개발 서버가 작동한다는 것을 알 수 있는데요. 프로젝트 디렉터리를 보시면 Vue CLI가 이미 node_modules 디렉터리를 생성해 놓고 그 안에 라이브러리들이 모두 다운받아 놓았음을 알 수 있습니다.

플러그인 추가

기본 프로젝트에서 추가로 필요한 모듈은 플러그인 형태로 나중에 추가가 가능합니다. 따라서 처음부터 과도하게 설정할 필요없이 필요할 때마다 플러그인을 추가하면서 개발이 가능합니다. 예제 프로젝트에서는 가장 많이 사용되는 Vue Router와 Vuex 플러그인을 추가해보겠습니다.

먼저 Vue Router 플러그인을 추가해보겠습니다.

$ vue add router
? Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n) No

🚀  Invoking generator for core:router...
📦  Installing additional dependencies...

added 1 package from 1 contributor and audited 11785 packages in 11.271s
found 0 vulnerabilities

✔  Successfully invoked generator for plugin: core:router
   The following files have been updated / added:

     src/router.js
     src/views/About.vue
     src/views/Home.vue
     package-lock.json
     package.json
     src/App.vue
     src/main.js

   You should review these changes with git diff and commit them.

역시 아이콘들이 나오면서 플러그인이 추가됩니다. 플러그인을 추가하면서 어떤 파일들을 변경하거나 추가하였는지 나와서 좋습니다.

Vue Router 설정 파일인 router.js을 열어보면 /과 /about 경로에 대한 라우팅 정보만 세팅되어 있습니다. 추후로 필요한 경로에 대해서 이 곳에 세팅을 하면 됩니다.

src/router.js

import Vue from "vue";
import Router from "vue-router";
import Home from "./views/Home.vue";

Vue.use(Router);

export default new Router({
  routes: [
    {
      path: "/",
      name: "home",
      component: Home,
    },
    {
      path: "/about",
      name: "about",
      // route level code-splitting
      // this generates a separate chunk (about.[hash].js) for this route
      // which is lazy-loaded when the route is visited.
      component: () =>
        import(/* webpackChunkName: "about" */ "./views/About.vue"),
    },
  ],
});

그리고 main.js 파일에도 라우터 설정을 위한 2줄의 코드가 추가되었음을 확인할 수 있습니다.

src/main.js

 import Vue from 'vue'
 import App from './App.vue'
+import router from './router'

 Vue.config.productionTip = false

 new Vue({
+  router,
   render: h => h(App)
 }).$mount('#app')

다음으로 Vuex 플러그인을 추가하겠습니다.

$ vue add vuex

🚀  Invoking generator for core:vuex...
📦  Installing additional dependencies...

added 1 package from 1 contributor and audited 11786 packages in 5.753s
found 0 vulnerabilities

✔  Successfully invoked generator for plugin: core:vuex
   The following files have been updated / added:

     src/store.js
     package-lock.json
     package.json
     src/main.js

   You should review these changes with git diff and commit them.

마찬가지로 순식간에 Vuex 플러그인이 추가됩니다.

Vuex 설정 파일인 store.js를 열어보면, Vuex의 구성 요소인 State와 Mutations, Actions을 정의할 수 있는 기본 뼈대가 잡혀져있습니다. (왜 Getters는 빠져있는지 모르겠네요?) 개발하시면서 필요한 코드를 이 곳에 추가해 나가면 됩니다.

import Vue from "vue";
import Vuex from "vuex";

Vue.use(Vuex);

export default new Vuex.Store({
  state: {},
  mutations: {},
  actions: {},
});

그리고 main.js 파일에도 Vuex 설정을 위한 2줄의 코드가 추가되었음을 확인할 수 있습니다.

 import Vue from 'vue'
 import App from './App.vue'
 import router from './router'
+import store from './store'

 Vue.config.productionTip = false

 new Vue({
   router,
+  store,
   render: h => h(App)
 }).$mount('#app')

상용 빌드

마지막으로 npm run build 커맨드를 실행하여 상용 배포를 위한 빌드를 해보겠습니다. 빌드를 실행하면 Vue CLI가 웹팩을 통해 프로젝트의 모든 소스 파일들을 번들링하여 dist 디렉터리에 넣어줍니다.

$ npm run build

> hello-vue-cli@0.1.0 build /work/temp/hello-vue-cli
> vue-cli-service build


⠦  Building for production...

 DONE  Compiled successfully in 4177ms                                                                      15:48:20

  File                                 Size               Gzipped

  dist/js/chunk-vendors.a0f0536d.js    112.02 kb          38.81 kb
  dist/js/app.3f1f8529.js              6.10 kb            2.29 kb
  dist/js/about.7a29333c.js            0.47 kb            0.33 kb
  dist/css/app.b675258f.css            0.33 kb            0.23 kb

  Images and other types of assets omitted.

 DONE  Build complete. The dist directory is ready to be deployed.
 INFO  Check out deployment instructions at https://cli.vuejs.org/guide/deployment.html

이 dist 디렉터리를 보면 index.html 파일들을 포함한 웹팩이 번들링한 파일들을 확인할 수 있습니다. 이 파일들을 상용 배포에 적합하도록 웹팩이 최적화 해놓은 것입니다.

Vue CLI Service

개발 서버를 구동하거나 상용 빌드를 할 때 NPM 커맨드를 사용할 수 있었던 이유는 Vue CLI가 관련 vue-cli-service 커맨드를 NPM 스크립트로 package.json 파일에 등록해놓았기 때문입니다.

package.json

  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },

NPM 커맨드 대신에 Vue CLI Service 커맨드를 직접 사용하고 싶으시면, npx 커맨드를 사용하시면 됩니다.

$ npx vue-cli-service serve
$ npx vue-cli-service build

최종 프로젝트 구조

여기까지 잘 따라오셨다면 Vue CLI가 다음과 같이 깔끔한 디렉터리 구조를 잡아줬을 것입니다. 이와 같이 Vue CLI를 이용하면 매우 손쉽게 Vue 프로젝트의 기본 골격을 얻을 수 있습니다.

.
├── .gitignore
├── README.md
├── babel.config.js
├── dist/
├── node_modules/
├── package-lock.json
├── package.json
├── public
│   ├── favicon.ico
│   └── index.html
└── src
    ├── App.vue
    ├── assets
    │   └── logo.png
    ├── components
    │   └── HelloWorld.vue
    ├── main.js
    ├── router.js
    ├── store.js
    └── views
        ├── About.vue
        └── Home.vue

마치면서

지금까지 간단하게 Vue CLI 3의 기본적인 사용법에 대해서 살펴보았습니다. 개인적으로 Vue CLI 2도 만족하면서 사용하고 있었는데, Vue CLI 3는 더욱 간결하고 유연해진 느낌입니다. Vue CLI 2를 사용할 때는 똑같은 기능을 위해서 어떤 기술을 사용해야 할지에 대해서 고민했었는데, (예를 들어 webpack을 쓸지 browserify를 쓸지) Vue CLI 3에서는 이런 부분을 모두 추상화 시켜놓아서 단순히 어떤 기능이 필요한지에 대해서만 신경을 쓰면 되서 좋은 것 같습니다. 그리고 그러한 의사결정을 프로젝트 생성할 때 강제받지 않고, 나중에 필요할 때 마다 플러그인 형태로 추가가 가능해서, 처음부터 복잡한 구조의 프로젝트를 만들지 않아도 됩니다. 게다가 Vue CLI 커맨드를 실행하면 NPM 피키지 다운로드까지 해줘서 한층 편해진 것 같습니다.

This work is licensed under CC BY 4.0