Vue.js install

공식문서: https://vuejs.org/guide/quick-start.html

 

Vue.js의 인스톨은 CDN을 사용하는 경우 상당히 간단합니다. 한 줄만 추가하면됩니다.

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

 

그리고 가장 간단한 Hello Vue 예제 입니다. '.mount()' 메소드에 쿼리셀렉터로 적용대상을 지정함을 눈여겨 봐두면 될것 같습니다. 기본 형태는 data 메소드를 통해 message값을 던저 주는 예제 입니다.

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

<div id="app">{{ message }}</div>

<script>
  const { createApp } = Vue

  createApp({
    data() {
      return {
        message: 'Hello Vue!'
      }
    }
  }).mount('#app')
</script>

 

그리고 아래는 ES Module Build 를 위한 예제 입니다.

<div id="app">{{ message }}</div>

<script type="module">
  import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'

  createApp({
    data() {
      return {
        message: 'Hello Vue!'
      }
    }
  }).mount('#app')
</script>