vue3中提示no default export

Question

vue3中 使用这种写法，照理说，引入的组件可以直接使用无需再通过components进行注册，
并且不用指定当前组件的名字，它会自动以文件名为主，也就是不用再写name属性了。我直接这样使用为什么这边还有红色的波浪线提示？

页面也成功将组件显示了啊

这是我引入的那个组件，没有写 export default 了。

Answer 1

引自免费微信小程序：皆我百晓生

在Vue3中，你使用<script setup>语法糖来编写组件（如LoginForm.vue），这种情况下组件的导出默认是模块式导出而非传统的export default。因此，在Login.vue中，你需要以解构赋值的方式来导入并使用这个组件：

<script lang="ts" setup>
import { defineComponent } from 'vue'
// 更改为以下方式导入 LoginForm 组件
import { LoginForm } from './LoginForm.vue'

</script>

<template>
  <div class="login-container">
    <!-- 然后在模板中这样使用 -->
    <LoginForm />
  </div>
</template>

由于Vetur报错提示“Module has no default export”，所以按照Vue3和Volar（Vue3的官方VSCode插件，已逐渐取代Vetur）的规则，需要调整上述导入方式。虽然页面上显示正常，但编辑器中的语法错误提示需要通过这种方式解决。