Vue 2 und Vue-Ressource [Kann die Eigenschaft 'get' von undefiniertem (...)] nicht lesen

Question

Kürzlich mit Broswerify und Vueify zu Vue-2 aufgerüstet. In der Haupt-App musste ich vue/dist/vue.js anstelle von 'vue' verlangen, da ich Webpack nicht benutze, aber jetzt, wenn ich Vue.use(require('vue-resource')); verwende, bekomme ich $ http ist undefined. Vue1 das hat reibungslos funktioniert. Was vermisse ich, um mit Vue-2 arbeiten zu können?

Fehler:

Uncaught TypeError: Cannot read property 'get' of undefined(…)

main.js:

require('./bootstrap'); 
var Vue = require('vue/dist/vue.js'); 
Vue.use(require('vue-resource')); 

// var amazon = require('amazon-affiliate-api'); 

/** 
* Next, we will create a fresh Vue application instance and attach it to 
* the page. Then, you may begin adding components to this application 
* or customize the JavaScript scaffolding to fit your unique needs. 
*/ 


new Vue({ 
    el: '#wrapper', 
    mounted: function() { 
     //use mounted instead of ready. 
     this.getHttp('/test', this.successFetch); 
    }, 
    data: { 
    }, 
    methods: { 
     successFetch: function (results) { 
      console.log(results); 
     }, 
     //vue resource methods 
     getHttp: function (url,callback) { 
      const params = { 
       headers: { 
        'X-CSRF-TOKEN': this.token 
       } 
      } 
      this.$http.get(url, params).then(callback).catch(err => console.error(err)); 
     }, 

Gulp.js:

const elixir = require('laravel-elixir'); 

require('laravel-elixir-vue-2'); 
require('browserify'); 
require('vueify'); 


elixir(function(mix){ 
    mix.sass('main.scss') 
     .browserify('app.js'); 
}); 

Package.json:

{ 
    "private": true, 
    "scripts": { 
    "prod": "gulp --production", 
    "dev": "gulp watch" 
    }, 
    "devDependencies": { 
    "aliasify": "^2.1.0", 
    "bootstrap-sass": "^3.3.7", 
    "gulp": "^3.9.1", 
    "jquery": "^3.1.0", 
    "laravel-elixir": "^6.0.0-14", 
    "laravel-elixir-vue-2": "^0.2.0", 
    "laravel-elixir-webpack-official": "^1.0.2", 
    "lodash": "^4.16.2", 
    "vue": "^2.0.1", 
    "vue-resource": "^1.0.3", 
    "vueify": "^9.3.0" 
    }, 
    "dependencies": { 
    "babel-preset-es2015": "^6.18.0", 
    "babel-preset-react": "^6.16.0", 
    "browserify": "^13.1.1" 
    } 
} 

Answer 1

Wenn Sie nur suchen, um diese Einrichtung als ein SPA (nicht unbedingt mit Laravel), dann würde ich empfehlen, auf die vue-cli, wenn es darum geht, Ihr Projekt Gerüstbau.

Innerhalb des CLI finden Sie eine einfache und erweiterte Einrichtung für browserify.

Wenn Sie die einfache Version Gerüst und vue-Ressource hinzufügen: npm install vue-resource -save--dev

Dann können Sie Ihre main.js zwicken setzen sich wie folgt zusammen:

import Vue from 'vue' 
import VueResource from 'vue-resource' 
import App from './App.vue' 

Vue.use(VueResource) 

new Vue({ 
    el: '#app', 
    render: h => h(App), 
    mounted() { 
     this.getHttp('/') 
    }, 
    methods: { 
     getHttp (url) { 
      this.$http 
       .get(url) 
       .then(response => console.log(response)) 
       .catch(err => console.error(err)) 
     }, 
    }, 
}) 

Die App-Komponente aus der nur die Standardeinstellung cli build

Wenn Sie für Laravel bauen, dann haben Sie eine Reihe von redundanten Modulen in Package.json und Sie könnten laravel elixir vueify verwenden. Es gibt eine Gabel für Vue 2.0 auf npmjs (je es nicht versucht):

npm install laravel-elixir-vueify-2.0

ich die Fragen gehe davon aus Sie durch das erfordert von Verpackungen werden verursacht haben, das nicht durch Elixier verwendet werden, wenn Erstellen Sie Ihre app.js Ausgabe. laravel-elixir-vue-2 ist zum Beispiel ein Webpack-Build - also tut wahrscheinlich nichts.

Vereinfachen Sie Ihre Schluck eingerichtet:

var elixir = require('laravel-elixir'); 

require('laravel-elixir-vueify-2.0'); 

elixir(function(mix) { 
    mix.sass('main.scss') 
     .browserify('main.js'); 
}); 

In der Theorie würde man dann richtig ausgegeben werden Aufbau und Vue 2.0-Pakete mit, es zu bauen. Wenn Sie dies mit dem oben genannten vue-cli kombinieren, sollten Sie in der Lage sein, diese frühen Phasen mit bewährtem Code zu scaften, um die Fehlersuche erheblich zu vereinfachen.

Answer 2

Ich reparierte dieses Problem der folgenden Modus:

npm install bootstrap-vue --save 
npm install vue-resource --save 

in main.js

import { Vue, i18n } from './bootstrap' 
import BootstrapVue from 'bootstrap-vue' 

Vue.use(BootstrapVue) 

bootstrap.js erstellen

import Vue from 'vue' 
import VueResource from 'vue-resource' 

Vue.use(VueResource) 

export { Vue } 

In App.vue

this.$http.get('/api/module/all').then(...