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

您必须在要使用它的每个组件中要求（'axios'）。

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

Vue.prototype.$http = axios

然后axios将在任何组件中提供，而无需导入。

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

来源：vue-resource retirement

node vue需要库才能在组件中使用

1 个答案: