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

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

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

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

시작하기

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.jsconst 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.jsimport 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를 렌더링시킨다.

woohyun

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store