2016-09-26 11 views
0

を解決できないので、vueファイルをコンパイルしようとしています。 しかし、私は次のエラーが発生していますenter image description hereWebpackがモジュールエラー

と私はなぜわかりません。私main.jsファイルには、以下の

// 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: { 
    } 
}) 

が含まれていますし、私のコンポーネントフォルダはmain.jsと同じフォルダにあります。 これは私のVUEコンポーネントです:index.vueとしてコンポーネント/ダッシュボード・コンポーネントの下にある

<template> 
Hello 
</template> 

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

私は間違っていますか?

ありがとうございます。

答えて

1

Vueファイルをインポートする必要があります。ですから、components/Dashboard/Dashboard.vueにコンポーネントを保存し、そのようにそれをインポートする必要があります。

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

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

が、これはとても便利のために

+0

これは、次のことを示しています: 'ERROR in ./view/vue/components/dashboard/dashboard.vue。モジュールビルド失敗:TypeError:this._initは関数ではありません.''私は 'dashboard.vue'に' _init'という関数を持っていません。 – southpaw93

+1

次の依存関係をインストールしてみてください: 'npm install --save vue vue-loader vue-html-loader css-loaderスタイルローダーbabel-loader babel-core babel-plugin-transform-runtime babel-preset-es2015 babel-runtime vue-hot-reload-api'これはgithubの問題で報告されているエラーです:https ://github.com/vuejs/vue-loader/issues/23 – Hammerbot

+0

それは素晴らしい、ありがとう、働いた! – southpaw93

1

を動作させるためにはcomponentsフォルダの前で./を忘れてはいけない、私はいつものだろう解決拡張アレイに.vueを追加し、頻繁に使用されるディレクトリのエイリアスを設定します。

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

だから私は私のプロジェクトでimport dashboard from 'components/dashboard-component';を使用することができます。

関連する問題