如何在 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

有很多方法。

我尊重@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 文件中进行导入。

导入'./animate.css'

如果你喜欢在模板中导入。

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

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

还可以查看 css-loader 包。它有什么作用？

Answer 2

Plugins 是特定的Vue 包，它们将全局级功能添加到Vue，因此如果您没有使用Vue 插件，那么您不需要使用@ 向Vue 注册它987654327@。

一般情况下，通过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>