Bei der Verwendung der Export-Standardeinstellung in Vue sind Probleme aufgetreten

Question

Codefehler

Ich habe versucht, den obigen Code auszuführen, aber er funktioniert nicht und ich kann im Browser nichts sehen. Gibt es eine andere Möglichkeit, den Code in <scripts setup> </script> zu schreiben? Was ich gelernt habe ist, dass die Funktion eingefügt wird export default { name: 'App', //code }中 Denn wenn ich etwas anderes eingebe, wie zum Beispiel console.log('It runs'), erhalte ich eine Fehlermeldung und kann nicht einmal „Hallo Welt“ sehen? Bitte helfen Sie ;-;

Answer 1

your code error

// App.vue
<script setup lang="ts">
import { onMounted, reactive, toRefs } from 'vue'

const state = reactive({
    showNavbar: 'xxxx'
})
const { showNavbar } = toRefs(state)

onMounted(async() => {
   console.log('hello world')
})

</script>

<template>

    <main>
         <RouterView />
    </main>
   
</template>

<style lang="scss" scoped>

</style>