如何在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是全局的一样，吸引到它的所有属性都可以被整个应用访问。

第二种方法是。

.vue像这样，将Import与文件中的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'

另外，如果您想导入template。

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

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

也看看css-loader包装。它能做什么 ？

Answer 2

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

一般来说，使用非 vue 特定的包不会有任何问题npm，但如果你需要全局注册一些东西，你通常可以简单地将它附加到window像这样的地方：

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