如何在 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 包一起使用，这个错误可以解决

Answer 1

有很多方法。

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

归功于此链接：- https://vuejsdevelopers.com/2017/04/22/vue-js-libraries-plugins/

当然是第一种方法@crig_h

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

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

第二种方法是。

将 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 文件中导入。

导入'./animate.css'

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

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

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

还可以查看css-loader package 。 它能做什么 ？

Answer 2

插件是为Vue添加全局级功能的特定Vue包，因此如果您不使用Vue插件，则无需使用Vue.use()将其注册到Vue 。

一般来说，通过npm使用非视图特定的包没有任何问题，但是如果您需要在全局范围内注册某些东西，您通常可以像这样简单地将其附加到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>