Question

我无法使用vue routes获取以下错误（npm 3.10.10，webpack 3.8.1）。如何解决这个问题

编译失败。

./ node_modules /巴别装载机/ lib中./ node_modules / VUE装载机/ LIB / selector.js类型=脚本＆安培;！？索引= 0＆安培; bustCache ./ SRC /组件/ quotes.vue！   找不到模块：错误：无法解析'./components/quote.vue'   '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 - 服务器/客户端？http://localhost:8080   webpack / hot / dev-server ./src/main.js

我使用webpack-simple

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

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

<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

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

<script>

export default {
  data () {
    return {

    }
  }
}
</script>

<style>

</style>

Answer 1

我使用{import Quote from'./components/quote.vue}而不是{import Quote from'./quote.vue}。现在工作正常

Answer 2

它的'./components/Quote.vue'以大写字母Q

Vue路线不起作用

2 个答案: