VUE JS 2 + WEBPACK未定義のプロパティ 'get'を読み取ることができません。VUE RESOURCE

Question

私は迷っています。

私は自分のプロジェクトにvue-cliを使用しました。 私はvuerouterをインストールしました。 すべては問題ありません。 vueコンポーネントでビューリソースを使用したいのですが、なぜ動作しないのかわかりません。

：

は、これは私が/＃/製品/ SEO に行くとき

import Vue from 'vue' 
 
import VueRouter from 'vue-router' 
 
var VueResource = require('vue-resource') 
 

 
Vue.use(VueRouter) 
 
Vue.use(VueResource) 
 

 
const router = new VueRouter({ 
 
    routes: [{ 
 
    path: '/', 
 
    component: require('./components/index.vue') 
 
    }, 
 
    { 
 
    path: '/products/stock', 
 
    component: require('./components/stock.vue') 
 
    }, 
 
    { 
 
    path: '/products/seo', 
 
    component: require('./components/seo.vue') 
 
    }, 
 
    { 
 
    path: '/settings', 
 
    component: require('./components/settings.vue') 
 
    } 
 
    ] 
 
}) 
 

 
new Vue({ 
 
    el: '#app', 
 
    router, 
 
    data: { 
 
    message: 'Hello Vue!' 
 
    }, 
 
    mounted:() => { 
 
    console.log("APP MOUNTED") 
 
    }, 
 
    render: h => h(require('./App.vue')) 
 
})

はコードがある（私はWebPACKのを使用しています）私のmain.jsです

<template> 
 
    <div id="app"> 
 
    Seo tabs du fastmanager {{ message }} 
 
    <input type="text" name="" v-model="message"> 
 
    </div> 
 
</template> 
 

 
<script> 
 

 
export default { 
 
    data:() => { 
 
    return { 
 
     message: "Hello buddy" 
 
    } 
 
    }, 
 
    mounted:() => { 
 
    console.log("SEO MOUNTED") 
 
    this.$http.get('/').then((response) => { 
 
    // success callback 
 
    }, (response) => { 
 
    // error callback 
 
    }); 
 

 
    } 
 
} 
 
</script> 
 

 
<style lang="css"> 
 
</style>

JSコンソールでこのエラーが発生しました。

seo.vue?468d:18Uncaught TypeError: Cannot read property 'get' of undefined(…)

Vueのリソースは、main.jsにうまく機能しています。

これは、ビューがアプリの前に読み込まれているからだと思います。私はやり方を知らない。 申し訳ありませんが、ma bad englishです。

Answer 1

私はITを見つけました。私seo.vueで

私はこれを置く：

<template> 
 
    <div id="app"> 
 
    Seo tabs du fastmanager 
 
    <textarea type="text" name="" cols="40" rows="10" v-model="message"></textarea> 
 
    <button type="button" v-on:click="test" name="button">Test</button> 
 
    </div> 
 
</template> 
 

 
<script> 
 
var Vue = require('vue') 
 
export default { 
 
    data:() => { 
 
    return { 
 
     message: "Coucou" 
 
    } 
 
    }, 
 
    mounted: function() 
 
    { 
 
    console.log(this) 
 

 
    }, 
 
    methods: { 
 
    test: function(){ 
 
     Vue.http.get('https://jsonplaceholder.typicode.com/posts/1').then((response) => { 
 
     console.log("SUCCESS",response); 
 
     this.message = response 
 
     }, (response) => { 
 
     console.log("ERROR",response); 
 
     // error callback 
 
     }); 
 
    } 
 
    } 
 
} 
 
</script> 
 

 
<style lang="css"> 
 
</style>

DIT作業罰金を。