javascript - 导入语句破坏脚本设置 Nuxtjs 3

Question

似乎当我使用import时<script setup> 中的声明它下面的所有代码都停止工作。

我安装了 @heroicons打包并使用 import 语句将其用作我的 <template> 中的组件。但导入语句下面的所有内容都不再起作用。我的代码:

<template>
  <HomeIcon class="w-5 h-5">
  <h1>{{myName}}</h1>
</template>

<script setup>
import {HomeIcon} from '@heroicons/vue/24/outline'

const myName = ref('username')
</script>

运行上面的代码时，我没有看到“用户名”作为我的代码中指定的标题。我还看到 ESlint 警告

myName is declared but it's value is never read

当我评论import时声明，myName ref 似乎又可以工作了。

我使用什么:

• VS 代码
• Nuxtjs 3
• 顺风 CSS
• 英雄图标包
• PNPM 作为包管理器

Answer 1

我解决了各种问题，我将在此处引用您的代码作为更改日志:

• <HomeIcon>没有关闭又名 <HomeIcon />
• vue缺少 @heroicons 的依赖项
• PNPM 需要为 shamefully hoist to work properly
• 干净地重新安装您的node_modules + pnpm-lock.yaml

以下是包含各种修复的 Pull 请求:https://github.com/flackokj/nuxt-issues/pull/1/files