如何将npm包与Vue SPA一起使用

Question

我已经使用vue加载器创建了Vuejs应用程序，现在我需要使用如下安装的npm包：

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

但是我有一个错误：

Uncaught TypeError: plugin.apply is not a function

dose Vuejs需要一个特殊类型的包，或者它可以与任何JavaScript包一起使用，这个错误可以通过解决

Answer 1

有很多方法。

我添加了@smiller评论，并感谢您分享链接。我在这里添加信息，以防有一天链接不起作用。

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

第一种方法当然@crig_h

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

有一定的缺点不适用于服务器渲染。否则，浏览器中的一切都会很好，因为window对浏览器来说是全局的，任何吸引到它的属性都可以访问整个应用程序。

第二种方法是。

将Import与.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包。它做什么？

Answer 2

插件是特定的Vue包，它为Vue添加了全局级别的功能，因此如果您不使用Vue插件，则不需要使用Vue.use()向Vue注册它。

一般来说，通过npm使用非vue特定的包没有任何问题，但如果你需要在全球范围内注册一些东西，你通常只需将其附加到window即可，如下所示：

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

Answer 3

不幸的是，这些答案对我都不起作用，我最终做的是

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

然后将其用作x.functionName()或任何

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>