如何在 Vue SPA 中使用 npm 包

Question

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

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

但是我有这个错误：

Uncaught TypeError: plugin.apply is not a function

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

Answer 1

Plugins 是特定的 Vue 软件包，它向 Vue 添加了 global-level 功能，所以如果您没有使用 Vue 插件，那么您就不需要需要使用 Vue.use() 向 Vue 注册它。

一般而言，通过 npm 使用 non-view 特定包没有任何问题，但如果您需要在全球范围内注册某些内容，通常只需将其附加到 window 像这样：

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

Answer 2

有很多方法。

我尊重@smiller 评论并感谢分享 link。我在此处添加信息以防 link 某天无法正常工作。

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

第一种方法当然@crig_h

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

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

第二种方法是 .

在.vue文件的js部分使用Import，像这样。

如果在“.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 软件包。它有什么作用？

Answer 3

不幸的是 none 这些答案对我有用，我最终做的是

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";

在那之后你在 mounted 方法中编码为 javascript

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

如何在 Vue SPA 中使用 npm 包

how use npm packages with Vue SPA

javascript

vue.js

vue-loader