처음 시작하는 Vue.js 개발환경 setup하기

이제까지 포스팅에서는 React.js를 다뤄왔으나 오늘은 스타트업에서 많이 사용되고 있는 Vue.js에 대해 공부해보려고 한다.

React, Vue, Angular등 최근에 사용되고 있는 프레임워크들 중 Vue는 이름대로(view라고 발음한다) 뷰 레이어에 초점을 맞춘 라이브러리로, 다른 라이브러리나 기존 프로젝트와의 통합이 간편하다고 한다.

또한 JSX로 작성된 component들을 기반으로 동작하는 React와 달리 익숙하고 쉬운 템플릿을 기반으로 View를 구성한다.

시작하기

먼저 이전에 webpack을 기반으로 React 개발환경을 구축한 코드에서 일부 수정을 통해서 Vue 개발환경을 구축해볼 것이다.

Webpack 4와 babel 7으로 react개발환경 셋업하기

webpack과 webpack-dev-server, babel, html loader는 위와 같이 설치하고, 추가적으로 vue 라이브러리들을 설치해준다.

$ npm install vue --save
$ npm install vue-loader vue-template-compiler -D

설치 이후 package.json파일은 다음과 같은 모습이 된다.

// package.json
...
"scripts": {
  "test": "echo \"Error: no test specified\" && exit 1",
  "dev": "webpack --mode development",
  "build": "webpack --mode production",
  "start": "webpack-dev-server --mode development --open"
},
"author": "",
"license": "ISC",
"devDependencies": {
  "@babel/core": "^7.1.0",
  "@babel/preset-env": "^7.1.0",
  "babel-loader": "^8.0.2",
  "css-loader": "^1.0.0",
  "html-loader": "^0.5.5",
  "html-webpack-plugin": "^3.2.0",
  "mini-css-extract-plugin": "^0.4.3",
  "vue-loader": "^15.4.2",
  "vue-template-compiler": "^2.5.17",
  "vue-template-loader": "^1.0.0",
  "webpack": "^4.19.1",
  "webpack-cli": "^3.1.0",
  "webpack-dev-server": "^3.1.8"
},
"dependencies": {
  "vue": "^2.5.17"
}
...

다음은 webpack.config.js파일이다.

// webpack.config.js
const VueLoaderPlugin = require("vue-loader/lib/plugin");

module.exports = {
  module: {
    rules: [
      ...
      {
        test: /\.vue$/,
        loader: "vue-loader"
      }
    ]
  },
  resolve: {
    alias: {
      "vue$": "vue/dist/vue.esm.js"
    },
    extensions: ['*', '.js', '.vue', '.json']
  },
  plugins: [
    ...
    new VueLoaderPlugin()
  ]
};

처음 시도해보느라 여러 삽질을 거쳤지만 결과적으로는 다음과 같이 webpack.config.js파일에 추가해주면 된다. vue code를 읽어주는 로더를 가져오고 .vue파일에 대해서는 vue-loader로 읽어준다.

기본적인 설정은 다음과 같이 완성했고 이제 실제 로직과 뷰가 있는 js파일들과 vue파일들을 살펴볼 것이다. 최소한의 vue코드가 돌아가는지만 확인하는 것이 목적이기 때문에 로직은 최소화 할 것이다.

React와 마찬가지로 components directory를 만들고 하위에는 AppComponent.vue 파일을 만들어준다.

// AppComponent.vue
<template>
    <h1>Hello from the AppComponent</h1>
</template>
<script>
  export default {

  }
</script>

Vue file은 <template>부분과 <script>부분으로 나뉘어 <template>에 html 코드를 통해 뷰를 만들고, 관련 로직을 <script>에 작성한다. 이 부분에서 JSX를 사용하는 React와 많이 다르다고 느껴졌다.

// src/index.js
import Vue from 'vue'
import AppComponent from './components/AppComponent.vue'

new Vue({
  render: h => h(AppComponent)
}).$mount('#app')

index.js파일에서는 AppComponent를 가져와 Vue 객체를 통해 id가 ‘app’인 엘리먼트에 렌더링시켜주었다.

$ npm run start

를 통해 dev서버를 실행시키면

vue setup

다음과 같이 정상적으로 vue코드가 동작하여 AppComponent를 렌더링시킨다.

REF.

시작하기 - Vue.js

How To Setup Vue js With Webpack 4 Example From Scratch

Getting Started | Vue Loader