2017-01-04 16 views
0

NPMを使用するライブラリが必要なコンポーネントでvue.jsを使用することに新しくなりました。ノードvueコンポーネントで使用するライブラリが必要です

これまでgulp Vueifyを使用して、.vueファイルとともにコアコードをbundle.jsファイルにコンパイルしました。私のコンポーネントで動作しますが、Axiosのようなものを追加するとライブラリが見つかりません。

私はNPM install axios --save-devでしたので、私にライブラリを手に入れました。

それから私のvueCore.jsは私がdashboardコンポーネント

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); 
       }); 
} 

でaxiosを試してみて、使用するときに、私はUncaught ReferenceError: axios is not defined

答えて

0

のエラーを持つすべての構成要素を取得

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 
    } 
}) 

を提出あなたはそれを使用したいすべてのコンポーネントに( 'axios')を要求する必要があります。

しかし私が好む方法は、Vue.prototype。$ httpを斧で設定することです。 だから、あなたのVueのアプリを宣言する前に、あなたはその後、axiosがそれをインポートする必要がなく、あなたのコンポーネントのいずれかで利用できるようになります

Vue.prototype.$http = axios 

を宣言します。

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

出典:vue-resource retirement

+0

働いていました。それはちょうどそれが多くのコンポーネントで使用されるので一度やりましたか? – Packy

+0

「プロトタイプ」に任意のものを含めるように設定できます。そのため、すべてのコンポーネントが継承します。私の研究プロジェクトでは、プロトタイプにaxiosとsnackbar.jsがあります。 –

関連する問題