javascript - 如何在 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对于浏览器来说是全局的，任何吸引到它的属性都可以被整个应用程序访问。

第二种方法是。

将 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

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

一般来说，使用非视图特定的包没有任何问题，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>