vue3 빌드하지않고 사용하기

vue3 without npm

vue3에서는 빌드하지 않고, npm 없이 사용할 수 있는 방법이 있습니다.
<script type="importmap"> 을 사용하여 vue를 사용할 수 있습니다.
에제코드는 아래와 같습니다.
test.html 파일을 만들고, 아래 내용을 복사+붙여넣기 한 다음에, 웹 브라우저에서 파일을 열면 됩니다!

<script type="importmap">
  {
    "imports": {
      "vue": "https://unpkg.com/vue@3/dist/vue.esm-browser.js"
    }
  }
</script>

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

<script type="module">
  import { createApp, ref } from 'vue'

  createApp({
    setup() {
      const message = ref('Hello Vue!')
      return {
        message
      }
    }
  }).mount('#app')
</script>

위 코드는 "Hello Vue"라는 값을 가진 message 변수의 값을 출력하는 예제입니다.

브라우저에서 확인하면, HTML 코드 작성시에는 {{message}} 라고 써있던 부분이,
아래와 같이 Hello Vue로 대체된 것을 확인할 수 있습니다.

#javascript,#vue,#vue3,#vuejs