导入语句中断脚本安装程序Nuxtjs 3

Question

当我在<script setup>中使用<script setup>语句时，它下面的所有代码似乎都停止工作了。

我安装了@英雄包，并使用导入语句在<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，但它的值从未被读取

当我评论import语句时，myName ref似乎又起作用了。

我用的是：

• VS码
• Nuxtjs 3
• 顺风CSS
• Heroicons软件包
• PNPM作为包管理器

Answer 1

我修复了各种问题，我将在这里引用您的代码，用于changelog：

• <HomeIcon>并没有关闭aka <HomeIcon />
• vue缺少作为@heroicons的依赖项
• PNPM需要是可耻地吊车正常工作
• 清除node_modules + pnpm-lock.yaml的重新安装

下面是带有各种修复程序的拉请求：https://github.com/flackokj/nuxt-issues/pull/1/files

Answer 2

看起来可行的方法是在不同的import中提取<script>语句，并将其作为组件导出。我现在有两个<script>标记；一个带有'setup‘属性，另一个没有。

我的最后代码：

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

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

export default {
    components: {
        HomeIcon,
    },
};
</script>

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

但是，尽管在<script setup>中一切看起来都很好，但我的linter插件似乎仍然不认识到我do使用声明的变量(参见img1)。img1

我使用的插件列表：

• ESLint
• Javascript (ES6)代码段
• 更漂亮
• 维图尔
• Vue语言特征(Volar)