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

Question

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

我主要安装了npm包，不确定如何翻译其中所写的内容。我是编码新手，最近才学习JS，现在正在尝试Vue

Answer 1

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

例如：

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一起用于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