Vueルートが機能しない

Question

vueルートを使用できません。getは次のエラーを返します（npm 3.10.10、webpack 3.8.1）。私はWebPACKの-シンプル

main.js 

import Vue from 'vue' 
import App from './App.vue' 
import VueRouter from 'vue-router' 
import NewQuote from './components/new-quote.vue' 
import Quotes from './components/quotes.vue' 

Vue.use(VueRouter) 

const routes = [ 
    {path: '', component: Quotes}, 
    {path: '/new-quote', component: NewQuote} 
] 

const router = new VueRouter({ 
    mode:'history', 
    routes // short for `routes: routes` 
}) 

new Vue({ 
    el: '#app', 
    router, 
    render: h => h(App) 
}) 

を使用して、この

Failed to compile.

./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index=0&bustCache!./src/components/quotes.vue Module not found: Error: Can't resolve './components/quote.vue' in 'D:\vue\vue-laravel\src\components' @ ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index=0&bustCache!./src/components/quotes.vue 11:0-43 @ ./src/components/quotes.vue @ ./src/main.js @ multi (webpack)-dev-server/client? http://localhost:8080 webpack/hot/dev-server ./src/main.js

を解決する方法Quotes.vue

<template> 
    <div> 
    <button class="btn btn-primary" v-on:click="onGetQuotes">Get Quotes</button> 
    <hr> 
    <app-quote v-for="quote in quotes" v-bind:qt="quote"></app-quote> 
    </div> 
</template> 

<script> 
import axios from 'axios'; 
import Quote from './components/quote.vue'; 

export default { 
    data(){ 
    return{ 
     quotes:[] 
    } 
    }, 
    components:{ 
    'app-quote' : Quote 
    }, 
    methods:{ 
    onGetQuotes(){ 
     axios.get('http://localhost:8000/api/quotes') 
     .then(response => { 
      console.log(response); 
     }) 
     .catch(e => { 

     }); 
    } 
    } 
} 
</script> 

<style> 

</style> 

Quote.vue

<template> 
    <div> 
    <div class="panel panel-default"> 
    <div class="panel-heading">Simple Quotes</div> 
    <div class="panel-body"> 
     {{ qt.content }} 
    </div> 
    <div class="panel-footer"> 
     <div> 
     <input type="text"> 
     <a href="" v-on:click="onUpdate">Save</a> 
     <a href="" v-on:click="onCancel">Cancel</a> 
     </div> 
     <div> 
     <a href="" v-on:click="onEdit">Edit</a> 
     <a href="" v-on:click="onDelete">Delete</a> 
     </div> 
    </div> 
    </div> 
    </div> 
</template> 

<script> 
export default { 
    props : ['qt'], 
    data(){ 
    return{ 

    } 
    }, 
    methods:{ 

    } 
} 
</script> 

<style> 

</style> 

新しい-quote.vue Iの代わりに{インポート引用の{./components/quote.vue「からインポート引用}から使用してきた

<template> 
    <div id="app"> 
    <div class="container"> 
    <router-view></router-view> 
    </div> 
    </div> 
</template> 

<script> 

export default { 
    data() { 
    return { 

    } 
    } 
} 
</script> 

<style> 

</style> 

Answer 1

<template> 
    <div> 
    <div class="panel panel-default"> 
     <div class="panel-heading">Simple Quotes</div> 
     <div class="panel-body"> 

     <form v-on:submit.prevent="createQuote"> 
      <div class="form-group"> 
       <label for="content">Content:</label> 
       <input type="text" class="form-control" v-model="quoteContent"> 
      </div> 
      <button type="submit" class="btn btn-default">Create New Quote</button> 
     </form> 

     </div> 
    </div> 
    </div> 
</template> 

<script> 
import axios from 'axios'; 
export default { 
    data() { 
    return { 
     quoteContent:'' 
    } 
    }, 
    methods:{ 
    createQuote(){ 
     axios.post('http://localhost:8000/api/quote', { 
     content: this.quoteContent 
     }) 
     .then(response => { 
     console.log(response); 
     }) 
     .catch(e => { 

     }); 
    } 
    } 
} 
</script> 

<style> 

</style> 

App.vue './quote.vue}。今すぐうまく動作します