vue에서 {ref}을(를) 가져오는 동안 오류가 발생하는 중?

vue에서 {ref}을(를) 가져오는 동안 오류가 발생하는 중?

나는 vue-mastery 튜토리얼에서 vue js를 배우는 신참이고 나는 튜토리얼을 보고 코드를 썼다 내 코드는

<template>
<div>Capacity: {{ capacity }}</div>
</template>

<script type="module">
import { ref } from "vue";
export default{
setup(){
const capacity = ref(3);
return { capacity };
}
};
</script>

이 코드를 실행할 때 터미널에서 오류가 발생하는 경우 "export 'ref'가 'vue'에서 발견되지 않았으며 웹 브라우저 오류에서 vue.runtime.esm.js?2b0e:619 [Vue warn]:속성 또는 메서드 "용량"은 인스턴스에서 정의되지 않고 렌더링 중에 참조된다.속성을 초기화하여 데이터 옵션 또는 클래스 기반 구성 요소에 대해 이 속성이 반응하는지 확인하십시오.https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties을 참조하십시오.

에서 발견되다.

---> src/App.vue에서

내 요구 사항은 인쇄용량이다: 브라우저에서 3번 누구든 나를 도와줘. 미리 고마워!

현재 버전의 Vue에서 지원되지 않는 Composition API(올해 말 출시되는 Vue 3의 일부임)를 사용하는 코드입니다.

지금은 컴포지션 API 플러그인을 다운로드하거나 Vue에서 단일 파일 구성 요소를 만드는 현재 지원되는 방법인 옵션 API로 전환하십시오.

현재 Vue Js는 {ref} 패키지를 지원하지 않음

두 가지 방법이 있다.

1. @vue/html-api npm 패키지를 가져오면 이렇게 사용할 수 있다.

    import { ref } from "@vue/composition-api"
    export default{
      setup() {
        const capacity = ref(3);
        return { capacity }
      }
   }
   

2. 당신은 전통적인 방법을 사용할 수 있다.

   export default {
     data() {
       return {
         capacity: 3
       }
     }
   }
   

참조URL: https://stackoverflow.com/questions/60369828/getting-error-while-importing-ref-from-vue