如何在Vue SPA中使用npm包。

Question

我使用vue-loader创建了Vuejs应用程序，现在我需要按照以下方式使用已安装的npm包：

   var x = require('package-name')
   Vue.use(x)

但是我遇到了这个错误：

Uncaught TypeError: plugin.apply is not a function

Vuejs需要特殊类型的包吗？还是可以与任何JavaScript包一起使用，这个错误可以解决吗？

- Zaid Direya

Answer 1

有很多方法。

我在尊重@smiller的评论并感谢分享链接的同时，补充了一些信息，以防链接某天无法使用。

链接来源：https://vuejsdevelopers.com/2017/04/22/vue-js-libraries-plugins/

第一种方法当然是@crig_h提出的。

window.x = require('package-name') 

有一些缺点，不支持服务器渲染。否则，在浏览器中一切都将正常工作，因为window是全局的，任何属性都会被整个应用程序访问。

第二种方法是。

在.vue文件中使用js部分进行导入，像这样。

如果在'.vue'文件内部。

<script>
import _ from 'lodash';

export default {
  created() {
   console.log(_.isEmpty() ? 'Lodash is available here!' : 'Uh oh..');
  }
} 
</script>

如果您有单独的 .js 文件，那么同样不需要使用 <script> 标签。

第三种方法是，在项目中无论何处导入 vue，您都可以编写此语句 import Vue from "vue";。

import moment from 'moment';
Object.definePrototype(Vue.prototype, '$moment', { value: moment });

这将设置相关属性为Vue。你可以在任何地方像这样使用它。因为Vue是应用程序的全局范围。

export default {
  created() {
    console.log('The time is ' . this.$moment().format("HH:mm"));
  }
} 

CSS添加

在Vue.js项目的src/main.js文件中，您可以进行导入操作。

import './animate.css'

如果您想在模板中进行导入，您可以这样做。

<style src="./animate.css"></style>

同时，请查看css-loader包。它是做什么的？

- Himanshu sharma

---

如果我的包是animate.css，我是否仍然需要写import animate from 'animate.css'？ - Akin Hwan

@AkinHwan 我也在答案中添加了CSS导入方法。 - Himanshu sharma

你好，你的回答中有一个拼写错误。应该是Object.defineProperty而不是Object.definePrototype。祝你有美好的一天。 - anakha

你可能还应该添加另一种语法：Vue.prototype.$something = importedSomething。 - anakha

Answer 2

“插件（Plugins）是特定的Vue包，它们向Vue添加全局级别的功能。因此，如果您没有使用Vue插件，则不需要使用Vue.use()将其注册到Vue中。”

“通常情况下，使用非Vue特定的npm包没有任何问题，但如果您需要全局注册某些内容，则通常可以将其简单地附加到window上，如下所示：”

window.x = require('package-name');

- craig_h

---

你不应该依附于窗口，因为它会破坏服务器渲染。更好的选项详见 https://vuejsdevelopers.com/2017/04/22/vue-js-libraries-plugins/。 - MillerGeek

@smiller171，感谢分享链接。我已将详细信息添加为答案，以防链接无法使用。 - Himanshu sharma

Answer 3

有更好的解决方案...首先在main.js中导入您的包

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
import Vue from "vue";
import App from "./App.vue";
import "package-name";

在mounted方法中，您需要将代码作为JavaScript编写。

<script>
export default {
   mounted() {
      const any = require("package-name");
      // your code as normal js
   },
};
</script>

- Yasser Mahmoud

Answer 4

很遗憾，这些答案都没有对我起作用，最终我做的是：

export default {
  computed() {
    x () {
      return require('package-name')
    }
  }
} 

然后将其用作 x.functionName() 或其他任何内容。

- Nishank Sisodiya