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