vue-cliを使用しないvue-loaderの使用方法

Question

webpackを使用して.vueファイルをトランスポートするVueプロジェクトの絶対最小限の例をまとめようとしています。

私の目標は、各ビルドステップを詳細に理解することです。ほとんどのチュートリアルではvue-cliを使用し、webpack-simpleの設定を使用することをおすすめします。そして、そのセットアップは動作しますが、それは私の単純な目的のために残酷に思えます。今のところ、私は熱心なモジュールの再読み込みで、バーベル、リンテイング、またはライブWebサーバーを望んでいません。

ちょうどimport Vue from 'vue'の最小限の例が機能します。 Webpackは、vueライブラリと自分のコードを1つのバンドルにまとめます。

しかし、今度は.vueのファイルが転送されるように、webpackの設定にvue-loaderを追加したいと思います。私はVUEローダーインストールされている：

npm install vue-loader 
npm install css-loader 
npm install vue-template-compiler 

をそして、私はWebPACKのコンフィグにVUE-ローダーを追加しました：

var path = require('path') 

module.exports = { 
    entry: './dev/app.js', 
    output: { 
    filename: 'bundle.js', 
    path: path.resolve(__dirname, 'dist') 
    }, 
    module: { 
    rules: [ 
     { 
     test: /\.vue$/, 
     loader: 'vue-loader', 
     options: { 
      loaders: { 
      } 
     } 
     } 
    ] 
    }, 
    resolve: { 
    alias: { 
     'vue$': 'vue/dist/vue.esm.js' 
    } 
    } 
}; 

私はhello.vue

<template> 
    <p>{{greeting}} World</p> 
</template> 

<script> 
export default { 
    data:function(){ 
     return { 
      greeting:"Hi there" 
     } 
    } 
} 
</script> 

そして、私のアプリでIを作成しましたインポート 'hello'

import Vue from 'vue' 
import hello from "./hello.vue"; 

    new Vue({ 
     el: '#app', 
     template:`<div><hello></hello></div>`, 
     created: function() { 
     console.log("Hey, a vue app!") 
     } 
    }) 

Th電子ローダーが.vueファイルをピックアップしていないようだ、私はエラーを取得する：

Module not found: Error: Can't resolve './hello.js' 

EDIT

import hello from 'hello.vue'しようとしたとき、私はエラーを取得する：

Unknown custom element: <hello> - did you register the component correctly? 

私が足りません一歩？ .vueコンポーネントを正しい方法でインポートしていますか？ app.jsからhello.vueコンポーネントを使用するにはどうすればよいですか？

Answer 1

まず、ファイルを正しくインポートしていません。

import Hello from './hello.vue' 

第2に、コンポーネントをインポートした後も何らかの形で登録する必要があります。グローバルVue.component('hello', Hello)、またはVueのインスタンス上でこの操作を行う次のいずれかの側の注意点として

new Vue({ 
    el: '#app', 
    template:`<div><hello></hello></div>`, 
    components: { 'hello': Hello }, 
    created: function() { 
    console.log("Hey, a vue app!") 
    } 
}) 

---

を、あなたは.vue拡張子を指定せずにファイルをインポートすることができるようにしたい場合は、あなたがいることを指定することができます.vue拡張子は、設定ファイルで解決する必要があります。その場合

、configファイル内 resolveオブジェクトは、次のようになります。

resolve: { 
    alias: { 
    'vue$': 'vue/dist/vue.esm.js' 
    }, 
    extensions: ['.js', '.vue', '.json'] 
} 

Here's the documentation on resolve.extensions.