[Vue] Vue-project에서의 뷰 인스턴스 생성 ( feat. vue__WEBPACK_IMPORTED_MODULE_4__.default is not a constructor 에러 )

지금까지 프로젝트에 적용했었던 Vue는 아래와 같았다.

1. 뷰컴포넌트 생성

2. 뷰 인스턴스 생성

3. dom에 뷰 인스턴스 부착

이걸 소스로 풀면 아래와 같이 되는데..

 

$(document).ready(function() {
	
	Vue.component('color-list',{
		template : '내용',
		data () {
			return {
				//데이터
			}
		},
		methods : {
			//함수
		}
	});
	
	new Vue({
		el : '#color'
	})
});

이렇게 컴포넌트를 만들고 나면 반드시 아래에, 뷰 인스턴스를 생성하여, DOM의 특정 태그에 부착시켜

줘야 했었다. => new Vue 생성자를 통한 뷰 인스턴스 생성

 

근데 VScode로 Vue project를 만들어 공부를 하는데

뷰 인스턴스를 다음과 같이 생성하면서 el태그를 따로 작성하지 않아도 mount함수를 이용해서 DOM에 부착을 하는 것

을 알 수 있었다.

 

Vue 2.0 버전이라면 아래와 같은 명령어를 이용한다.

// 기존 : Vue 2.0 버전대
import Vue from 'vue'; // Vue 라이브러리를 사용하기 위해 import
import App from './App.vue'; // 컴포넌트를 가져옴

new Vue({ // 뷰 인스턴스 생성
  render: h => h(App), //  App 컴포넌트
}).$mount('#app'); // id가 app인 태그에 뷰 인스턴스를 부착

근데 Vue가 3.0버전에 들어오면서 이게 바뀌었다. 아래와 같이

import { createApp } from 'vue'; // vue 라이브러리 가져옴
import App from './App.vue'; // App.vue 컴포넌트 가져옴
createApp(App).mount('#app'); // App 컴포넌트를 id가 app인 태그에 부착

 

내 개발환경은 Vue 3.0인데, 이거 모르고 2.0버전대 처럼 뷰인스턴스 생성했다가 아래와 같은 에러가 떴고

Vue 3.0번대 처럼 뷰인스턴스를 생성했다. 즉 자기 Vue 버전에 맞는 뷰인스턴스 생성 방식을 쓰도록 하자.

 

main.js?56d7:5 Uncaught TypeError: vue__WEBPACK_IMPORTED_MODULE_4__.default is not a constructor