如何使用` <script setup>`?

Question

Vue 版本： 3.0.11

使用以下代碼：

<template>
  <button @click="inc">{{ count }}</button>
</template>

<script setup>
  import { ref } from 'vue'

  export const count = ref(0)

  export const inc = () => count.value++
</script>

我有：

ERROR  Failed to compile with 1 error
 error  in ./src/views/HyperScript.vue?vue&type=script&setup=true&lang=js

Syntax Error: TypeError: Cannot read property 'content' of null


 @ ./src/views/HyperScript.vue?vue&type=script&setup=true&lang=js 1:0-293 1:0-293 1:294-576 1:294-576
 @ ./src/views/HyperScript.vue
 @ ./src/router/index.ts
 @ ./src/main.ts
 @ multi (webpack)-dev-server/client?http://192.168.6.175:8080&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/main.ts

Answer 1

您不需要在腳本中添加export ：

<template>
  <button @click="inc">{{ count }}</button>
</template>

<script setup>
  import { ref } from 'vue'

  const count = ref(0)

  const inc = () => count.value++
</script>

現場演示