Vue 설치 및 사용

Vue를 사용할 수 있는 방법에는 크게 2가지가 있습니다. CDN을 이용하여 자바스크립트를 삽입하는 방법과, npm을 이용하여 Vue CLI로 시작하는 방법이 있습니다.

보다 자세한 내용은 공식 홈페이지에서 보실 수 있습니다.

1. CDN 이용

이 방법은 기존의 웹 코드에 Vue를 추가하는 방법입니다.

<html>
    <head>
        ...
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        ...
    </head>
    ...
</html>

Vue 인스턴스 만들기

CDN을 이용해서 Vue를 추가했다면, HTML의 script태그에서 Vue 인스턴스를 만들 수 있습니다.

<body>

    <div id="app"></div>

    <script>
    new Vue({
        el: '#app',
        data: {
            message: 'Hello Vue.js!'
        }
    });
    </script>

</body>

위 코드에서는 new Vue() 생성자를 통해 새로운 인스턴스를 만들었고, 그 안에 여러 속성들을 정의했습니다.

Vue 인스턴스는 DOM 요소에 연결되어야 하는데, 어떤 요소에 연결할지 el값으로 설정합니다.
data에서는 이 인스턴스에서 사용할 변수를 선언합니다. 여기에서 선언된 변수들은 data binding이 되어 변수가 업데이트 되면 DOM 요소도 자동으로 업데이트 됩니다.
상단의 div태그 안에 ``가 있는데, 이 형태는 mustache라고 불리며 Vue 인스턴스의 변수의 값을 보여줍니다.

2. Vue CLI 이용

이 방법은 npm을 이용하여 Vue CLI를 설치하고 새로운 애플리케이션을 생성하는 방법입니다. 꼭 Vue CLI를 이용할 필요는 없지만, Vue를 따로 설치하고 Babel 등의 여러 플러그인을 설정하는 것이 번거롭기 때문에 자동으로 설치, 설정해주는 Vue CLI를 이용하는 것이 좋습니다.

npm install -g @vue/cli
vue create my-app

Vue CLI의 옵션들은 default로 선택해주시면 되고 설치가 완료되면 my-app 디렉토리가 생성됩니다.

Single File Components

위 방법으로 Vue를 설치했다면, Single File Components라는 것을 이용하실 수 있습니다. 어떤 애플리케이션 전체를 Vue를 사용해 만든다면 Single File Components가 적합합니다. 위에서 만든 my-app 디렉토리 안에 여러 파일들이 있는데, src 폴더 안에 .vue 확장자를 가진 파일들이 있습니다. 이 파일들이 Single File Components에 해당하는 vue 파일입니다. 말 그대로 하나의 파일이 하나의 컴포넌트가 되는 것 입니다.

이 애플리케이션을 실행 했을 때 어떻게 보이는지 알아보기 위해 Vue CLI 가 생성한 src/main.js를 잠시 보겠습니다.

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

Vue.config.productionTip = false

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

new Vue() 부분을 보면 App.vue를 #app에 렌더링한다고 이해할 수 있습니다. 이 #app은 public/index.html에 있습니다. 하지만 Vue 애플리케이션을 만들 땐 다양한 Vue 컴포넌트들을 만들어 사용하기 때문에 이 html 파일을 직접 조작할 일은 거의 없습니다.

Vue CLI를 이용하여 애플리케이션을 생성하면 파일이 여러개가 생성되어 혼란스럽지만, 다른 파일들은 각종 설정 파일들이기 때문에 우선은 vue 파일들을 위주로 보시면 됩니다. 자동으로 생성된 vue 파일은 src/App.vue와 src/components/HelloWorld.vue입니다. (Vue CLI 버전에 따라 차이가 있을 수 있습니다.)

vue 파일은 기본적으로 아래와 같은 구조 입니다.

<template>
...
</template>

<script>
...
</script>

<style scoped>
...
</style>

template에는 HTML 코드가, script에는 JavaScript 코드가, style에는 CSS 코드가 들어갑니다. (style에 scoped 를 써주면 스타일이 이 컴포넌트에서만 적용되고 다른데엔 영향을 주지 않도록 할 수 있습니다.)

아래는 Vue CLI에서 자동으로 생성한 vue 파일들 입니다.

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js App"/>
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'App',
  components: {
    HelloWorld
  }
}
</script>
<template>
  <div class="hello">
    <h1></h1>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  }
}
</script>

script에는 항상 export default { }가 필요합니다. 이 파일에 작성된 컴포넌트를 export해서 다른 컴포넌트에서도 사용하기 위함입니다. export default 안에는 Vue 컴포넌트가 가질 속성들이 들어갑니다.

App.vue에서, components 에는 다른 컴포넌트를 import해서 사용할 때 어떤 컴포넌트들을 import 했는지 써놓습니다. 예시처럼 HelloWorld라는 컴포넌트를 import 했으면 template 부분에서 <HelloWorld> 태그를 이용할 수 있습니다.
HelloWorld.vue에서, props는 부모 컴포넌트로 부터 받은 데이터 입니다. App.vue에서 HelloWorld를 import해 사용했기 때문에 App이 부모고, HelloWorld가 자식입니다. App에서 <HelloWorld msg="Welcome to Your Vue.js App" />으로 자식에게 msg 데이터를 전달해주었습니다.

export default안에는 쓸 수 있는 속성들은 new Vue() 생성자에게 전달하는 속성들과 동일합니다. 다만, Single File Components에서는 자동으로 template의 최상단 DOM 요소에 연결되기 때문에 el 속성은 필요하지 않습니다.