node.js - Node Vue 需要在组件中使用的库

Question

我刚刚开始使用 vue.js 以及需要使用 NPM 的库的组件。

到目前为止，我使用 gulp Vueify 将我的核心代码与 .vue 文件一起编译到 bundle.js 文件中。它可以与我的组件配合使用，但是当添加像 Axios 这样的组件时，它无法找到该库。

所以我做了NPM install axios --save-dev 这给了我这个库。

然后是我的 vueCore.js 文件

var $               = require("jquery")
var Vue             = require('vue')
var axios           = require('axios')
var contentList     = require('./components/content-list.vue')
var heroHeader      = require('./components/hero-header.vue')

new Vue({
    el: '#page',
    components: {
        'dashboard-view': dashboard,    
        'content-list': contentList,
        'hero-header': heroHeader
    }
})

然后当我尝试在 dashboard 组件中使用 axios

mounted:  function() {

            axios.get('/custom_api/api_home_get.php?', {
                params: {
                  ID: i4
                }
              })
              .then(function (response) {
                this.last = response;
                console.log(response);
              })
              .catch(function (error) {
                console.log(error);
              });
}

然后我得到了所有组件元素，并出现错误 Uncaught ReferenceError: axios is not Defined

Answer 1

您必须在每个要使用它的组件中 require('axios')。

但我更喜欢的方式是使用 axios 设置 Vue.prototype.$http。因此，在声明您的 Vue 应用程序之前，您需要声明

Vue.prototype.$http = axios

然后 axios 将在您的任何组件中可用，而无需导入它。

mounted: function() {
    this.$http.get('/whatever').then(whatever)
    ...
}

来源:vue-resource retirement