Webpack kann Modulfehler nicht beheben

Question

So versuche ich eine vue Datei zu kompilieren. Aber ich bekomme den folgenden Fehler

und ich weiß nicht warum. Meine main.js Datei enthält folgende

// Vue things 
import Vue from 'vue' 
import VueResource from 'vue-resource' 
Vue.use(VueResource) 


// Vue Components 
import dashboard from 'components/dashboard-component' 

new Vue({ 
    el: "body", 
    components: { 
     dashboard 
    }, 
    methods: { 
    } 
}) 

und meine Komponenten-Ordner ist in dem gleichen Ordner wie main.js. Das ist meine vue Komponente:

<template> 
Hello 
</template> 

<script> 
// Exports 
export default { 
    components: { 
     dashboard 
    }, 
    props: { 
    }, 
    data: function (argument) { 
    }, 
    ready() { 
    }, 
    methods: { 
    } 
} 
</script> 

, die unter Komponenten/Armaturenbrett-Komponente als index.vue ist.

Was mache ich falsch?

Vielen Dank.

Answer 1

Sie müssen Vue-Dateien importieren. So müssen Sie Ihre Komponente components/Dashboard/Dashboard.vue speichern und importieren Sie es in etwa so:

import Dashboard from './components/Dashboard/Dashboard.vue' 

new Vue({ 
    el: "body", 
    components: { 
     Dashboard 
    }, 
    methods: { 
    } 
}) 

Sie die ./ vor dem components Ordner, damit diese nicht vergessen

Answer 2

Für convinient arbeiten, würde ich gewohnt hinzufügen .vue aufzulösenden Erweiterungen Array, und legen Sie Alias ​​für Verzeichnisse, die häufig verwendet werden würde:

resolve: { 
    extensions: ['', '.js', '.vue'], 
    fallback: [path.join(__dirname, '../node_modules')], 
    alias: { 
    'data': path.resolve(__dirname, '../data'), 
    'src': path.resolve(__dirname, '../src'), 
    'assets': path.resolve(__dirname, '../src/assets'), 
    'views': path.resolve(__dirname, '../src/views'), 
    'components': path.resolve(__dirname, '../src/components') 
    } 
}, 

Also ich import dashboard from 'components/dashboard-component'; in meinem Projekt verwenden können.