Question

我使用vue-loader创建了Vuejs应用程序，现在我需要使用已安装的npm包，如下所示：

＆＃13;

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

＆＃13;

但我有这个错误：

Uncaught TypeError: plugin.apply is not a function

剂量Vuejs需要特殊类型的包，或者它可以使用任何JavaScript包，这个错误可以解决

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是app的全球范围。

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

为CSS添加

你可以在vue.js项目的src / main.js文件中导入。

导入'./animate.css'

另外，如果你想在模板中导入。

在模板中，您可以执行此操作。

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

另请查看css-loader包。它做了什么？

Answer 2

Plugins是特定的Vue个软件包，可将全局级功能添加到Vue，因此，如果您未使用Vue插件，则不要使用{39} ; t需要使用Vue向Vue.use()注册。

一般来说，通过npm使用非视图特定包没有任何问题，但如果您需要在全局注册某些内容，通常只需将其附加到window就可以了这样：

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

Answer 3

不幸的是，这些答案都对我没有帮助

0x7ff2a47a1998 - address of var during import
0x7ff2a47a1998 - address of var in main module after import
0x7ff2a47a1998 - address of var before modifying it in modify_variable()
0x7ff2a47ae500 - address of var after modifying it in modify_variable()
0x7ff2a47ae500 - address of var in main module after modify_variable() call

然后将其用作export default { computed() { x () { return require('package-name') } } }或其他

Answer 4

有更好的解决方案...首先将包导入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";

在那之后，您将内部方法编码为javascript

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

如何在Vue SPA中使用npm包

4 个答案: