반응형
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 글 들은, 위와 같은 상황에서 써야하는 경우를 위해 글을 쓰도록 하겠습니다.
골라서 봐주세요~~
728x90
반응형
'Vue.js' 카테고리의 다른 글
[Vue3] Stand Alone #3. v-for, :key (0) | 2022.03.20 |
---|---|
[Vue3] Stand Alone #2. v-if, v-else-if, v-else, v-show (0) | 2022.03.20 |
[Vue] v-if 와 v-show 의 차이. 사용 시 주의사항. (0) | 2021.06.07 |
[Vue] jQuery 사용하기 #eslint 설정 (2) | 2021.01.15 |
[Vue] 화살표함수 (arrow funcion) 사용 시 주의사항 #삽질주의 (0) | 2021.01.14 |
댓글