找不到@vue-icons/feather依赖项

2022-02-25 vue.js nuxt.js

我有一个正在处理的简单Nuxt项目，我安装了Vue Icons并尝试将搜索图标添加到我的组件，但在编译时收到以下错误：

This dependency was not found:                                                                                                                                                 
                                                                                                                                                                               
* @vue-icons/feather in ./node_modules/babel-loader/lib??ref--2-0!./node_modules/vue-loader/lib??vue-loader-options!./components/SiteHeader.vue?vue&type=script&lang=js&       
                                                                                                                                                                              
To install it, you can run: npm install --save @vue-icons/feather

但我已经在我的src和Functions文件夹(我在FireBase上托管)上安装了它

"dependencies": {
  "@nuxtjs/firebase": "^7.6.1",
  "@vue-icons/feather": "^1.0.19",
  "firebase": "^8.9.1",
  "isomorphic-fetch": "^3.0.0",
  "nuxt": "^2.0.0"
}

我使用的import语句是直接从网站复制的

import { SearchIcon } from "@vue-icons/feather";

我读到的一些类似问题谈到了transpiling the library，但似乎不起作用，我是否需要将第三方库添加到nuxt.config文件的其他部分？

解决方案

我将引用文档中所写的内容

此项目旨在重组[.]Vue 3的常用图标包。

Nuxt2与Vue3不兼容。

如果要使用完全相同的vue-feather-icons库，请为此使用this package。

它应该和

一样简单

<template>
  <div>
    <ActivityIcon />
  </div>
</template>

<script>
import { ActivityIcon } from 'vue-feather-icons'

export default {
  components: {
    ActivityIcon
  }
}
</script>

否则，我还可以推荐unplugin-icons，它提供的功能更多，而且非常灵活。并且完全包含the icons you're looking for。

非常棒的软件包，不必在其他功能之上处理查找工作软件包的所有烦人部分。

相关文章