반응형
새로운 Vue3 프로젝트에서 Vue2 이전 컴포넌트(.vue 파일)를 사용하려면 어떻게 해야 합니까?
Vue3 버전이 출시되었지만 새 버전에서 이전 컴포넌트 코드를 사용하는 예는 없습니다.왜?
인덱스는 다음과 같습니다.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Vue 3 Example using Vue 2 component</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="app">
<h1>{{ product }}</h1>
<my-old-vue-component :my-prop="'my string in here'"></my-old-vue-component>
</div>
<script src="./main.js"></script>
<script src="./myOldVueComponent.vue"></script>
<!-- Mount App -->
<script>
const mountedApp = app.mount('#app')
</script>
</body>
</html>
이게 제 메인입니다.js:
const app = Vue.createApp({
data() {
return {
product: 'my product',
}
}
})
오래된 단순한 Vue2 컴포넌트(myOldVueComponent.vue)는 다음과 같습니다.
<template>
<div>
{{myProp}}
</div>
</template>
<script>
export default {
name: "myOldVueComponent",
props: {
myProp: { type: String }
},
data() {
return {
},
}
</script>
.vue 파일 Import 시 uncaught SyntaxError: 오류가 발생하였습니다.예기치 않은 토큰 '<' (즉,<template>오래된 컴포넌트 안에 태그를 붙입니다.
Vue2 컴포넌트는 Vue3에서 동작합니다.그것은 당신의 코드에 문제가 아닙니다.
문제는 다음과 같습니다.
<script src="./myOldVueComponent.vue"></script>
브라우저에서 .vue 파일을 직접 가져올 수 없습니다.vue 1, 2에서는 할 수 없고 vue 3에서는 아직 할 수 없습니다.브라우저는 이 구문을 이해할 수 없습니다.브라우저에서 사용할 수 있는 코드를 변환하는 번들러가 필요합니다.가장 인기 있는 번들러는 webpack, rollup ecc입니다.
참조: https://v3.vuejs.org/guide/single-file-component.html#for-users-new-to-module-build-systems-in-javascript
Vue CLI를 사용하여 프로젝트를 셋업할 것을 강력히 권장합니다.특히 npm/bundlers의 세계에 초보자일 경우
언급URL : https://stackoverflow.com/questions/64122089/how-can-i-use-vue2-old-component-vue-file-with-a-new-vue3-project
반응형
'programing' 카테고리의 다른 글
| v-bind 상태:스타일. (0) | 2022.08.25 |
|---|---|
| vue 템플릿에서 const를 사용하려면 어떻게 해야 합니까? (0) | 2022.08.25 |
| HTML 본문에 DOM 요소를 추가하는 Vue 구성 요소를 테스트하는 방법은 무엇입니까? (0) | 2022.08.25 |
| 농담으로 Vue 장치 테스트 vuex 저장소 작업 (0) | 2022.08.25 |
| 계산된 속성에 대해 형식 설명/Vuej가 컴파일되지 않음 (0) | 2022.08.25 |