javascript - 从 vue 导入 {ref} 时出错？

Question

我是从 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>

当我运行此代码时，我在终端中收到错误是
“在‘​​vue’中找不到导出‘ref’
而在网络浏览器错误是
vue.runtime.esm.js?2b0e:619 [Vue 警告]:属性或方法“容量”未在实例上定义，但在渲染期间被引用。通过初始化该属性，确保该属性是 react 性的，无论是在数据选项中，还是对于基于类的组件。见:https://v2.vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties .
在发现
---> 在 src/App.vue

我的要求是打印容量:3 在浏览器中任何人请帮助我提前谢谢!

Answer 1

您的代码使用 Composition API ，在当前版本的 Vue 中不支持(它将成为今年晚些时候发布的 Vue 3 的一部分)
目前，您可以 download the Composition API plugin ，或切换到Options API ，这是目前Vue中支持制作单文件组件的方式