[Vue.js] 기존 프로젝트에 Vue.js 3 추가하기

 

Vue.js는 프로젝트의 특정 영역에만 적용해서 사용할 수도 있다는 장점이 있다.

이번에 프론트 리뉴얼 작업을 하게 되었는데, 이번 기회에 Vue.js를 연습해보면 좋을 것 같아서 

기존 프로젝트에 Vue.js 3를 추가했다.

 

<!-- vue를 적용시킬 컨테이너에 id 설정 -->
<div id="app">
    <!-- vue 변수 값 출력하기 -->
    <p>{{ var1 }}<p>
    <p v-text="var1"></p>
</div>

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

<script type="module"> 
    // 사용할 기능들을 vue 라이브러리에서 가져오기
    import {
        createApp,        
        ref,        
        watch,        
        computed,        
        onMounted,        
        ...    
    } from 'vue'     

    const App = {        
        setup() {            
            // 변수 선언            
            const var1 = ref('hello');             
            // ref로 선언한 변수를 사용할 때에는 .value를 붙여주어야 함            
            console.log(var1.value);             

            // jQuery의 $(document).ready()와 같은 역할
            // DOM 요소를 사용할 수 있음
            // swiper 등을 초기 세팅하는 스크립트는 onMounted 안에 작성해주어야 에러가 나지 않음
            onMounted(() => {
                ...            
            })             

            // html에서 사용할 변수는 반드시 return에 기입해주어야 함            
            return {                
                var1            
            };        
        }    
    };        

    // 컨테이너의 id 지정    
    createApp(App).mount('#app');
</script>