[Vue3] Stand Alone #1. vuejs CDN 및 기본 사용

Vuejs 3 CDN 으로 사용하기

 

Vue3 를, (npm 없이, webpack 없에, package.json 없이 등등..),
홀로 사용 하려는 경우에 vue3 를 개발하는 방식 중 하나 입니다.
Stand Alone 으로 사용할 수 밖에 없는 경우만 봐주세요~

 

cdn 주소는 https://unpkg.com/vue@3 입니다.

<!-- vue 3 -->
<script src="https://unpkg.com/vue@3"></script>

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

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

<style>
    #app{
        width: 100%;
        text-align: center;
    }
</style>

lesson.html 로 이름을 만들고

파일을 더블클릭 해서 실행 해 볼 수 있습니다.

결과

기본적으로 이렇게 사용할 수 있습니다.

 

npm 이나 vue cli 로 프로젝트를 만들고, webpack 등으로 빌드해서 사용할 수 있지만, 

그럴 수 없는 환경(예를들어 웹 호스팅에서 지원안해줄 때, )일 경우에 cdn방식이나 로컬 js 를 include 해서 사용할 수 있습니다.

앞으로 Vue Stand Alone 글 들은, 위와 같은 상황에서 써야하는 경우를 위해 글을 쓰도록 하겠습니다.

골라서 봐주세요~~