如何使用.Vue框架在vscode中使用已安装的npm包？

Question

我已经安装了一个npm软件包，但是我使用的是vue框架。npm包是用JS编写的，但是Vue的语法与JS不同，尽管它是一个JS框架。如何在我的vue项目中使用这个包？

我主要安装了npm软件包，不知道如何翻译其中所写的内容。我刚开始编码，直到最近才学到JS，现在正在尝试Vue。

Answer 1

Vue语法仍然是一些标准的JS，只是添加了一些糖，因此，NPM包可以通过简单的导入在Vue组件<script>标记中导入。

例如：

import axios from 'axios';

export default {
  ...
  methods: {
    doSomething() {
      axios.get(...)
    }
  }
}

有些包可能公开更多定义的方法和属性供您导入，在这种情况下，您可以使用所谓的“析构”来从包中导入所需的内容，而不是整个包：

import { method_1, method_3, property_a } from 'myPackage';

export default {
  data() {
    return {
      myComponentProperty: property_a
    }
  },
  ...
  methods: {
    doSomething() {
      const a = 'something';
      const b = method_1(a);
      
      return b;
    }
  }
}

一般来说，只需在https://www.npmjs.com/上找到您的包，并查看使用它的说明，您将有一些关于如何在项目中导入和使用它的示例。

Answer 2

这取决于您正在使用的包，如果它是一个简单的日期格式化程序，或者它是一个带有烘焙功能的完整日历。

第一个方法可以作为在此解释链接/嵌套到一个方法中。

另一种方法难度很大，而且更高级，需要使用下面链接的方法：

• 如果您想在Nuxt (元框架主要用于Vue for SSR)中实现这一点：https://stackoverflow.com/a/68485267/8816585
• 对于Vue来说，我想这仍然是要走的路：https://vuejs.org/guide/components/provide-inject.html#inject

这篇文章有点老了，但是对于如何将一些普通的JS代码抽象和插入到您的VueJS实例方面，它仍然是相关的。我相信你能找到更像这个的。

由于您是JS/Vue的新手，我建议您在总体上轻松处理，并且只使用第一种类型的易于集成的包。

总之，习惯整个生态系统+做事的方式。

一种简单的方法有时是前缀/后缀您的包，例如，刷卡也可以使用感谢swiper/vue。

您可以在这里找到一个很好的酷包列表：https://github.com/vuejs/awesome-vue