は、どのように私は私の「WebPACKの」中「VUE」を追加しようとをbundle.jsてるのWebPACKのbundle.js

に「vue.js」を追加することができますが、私は動作しません。 config.jsのは、どのように私は私の「WebPACKの」中「VUE」を追加しようとをbundle.jsてるのWebPACKのbundle.js

module.exports = { 
    entry: './entry.js', 
    output: { 
     filename: './bundle.js', 
    } 
};

entry.js

var Vue = require('vue'); 

var vm = new Vue({ 
    el: '#app', 
    data: { 
     msg: 'Hello, Vue!' 
    } 
});

index.htmlを

<!DOCTYPE html> 
<html> 
    <head> 
     <meta charset="utf-8"> 
     <title>Vue Study</title> 
    </head> 
    <body> 
     <div id="app"> 
      {{ msg }} 
     </div> 
     <script src="bundle.js"></script> 
    </body> 
</html>

index.html on chrome & dev-console

出典

2017-03-26 Park Hansu

によって

var Vue = require('vue')

を交換する必要がありますあなたが望むならCommonJSですので、間違っていませんrequire('vue')は、新しい構文に切り替えることをお勧めします。

はあなたが行うことができます。

var Vue = require('vue').default;

または

import Vue from 'vue';

defaultプロパティのない最後の作品

、新しいES6構文があなたのためにこれを自動的に行いますので。

出典

2017-03-26 18:36:35

ありがとうございました。今は 'entry.js'ではなく 'index.html'で 'Vue'コンストラクタを使用できます。そして私は新しいエラーメッセージを受け取りました。 '[Vue警告]：テンプレートコンパイラが利用できないVueのランタイム専用ビルドを使用しています。テンプレートをレンダリング関数にあらかじめコンパイルするか、コンパイラに含まれているビルドを使用してください。（にある ' –

-1

あなたはVueの2.2は、デフォルトあたりES6モジュールを使用しますが、それは間違っているなど、他の回答で指摘されたにも関わらず、あなたはまだ使用することができます

import Vue from 'vue'

出典

2017-03-26 17:55:37

WebpackはCommonJSのインポートを処理できるので、実際問題はありません。 –

@EdmundoRodrigues "require"は問題ではありませんが、この場合importは問題を解決します。この場合、主な依存関係であるため、 "import"の使用がより論理的であり、最終的なバンドル。私の答えは正しい、あなたのdownvoteは正当化されていません –

確かに、しかし、あなたは "それを使用するようにそれを間違っている"と置き換える必要がありますと言う。あなたの答えは問題を解決しましたが、理由を説明しませんでした。 –

は、どのように私は私の「WebPACKの」中「VUE」を追加しようと をbundle.jsてるのWebPACKのbundle.js

答えて

関連する問題

は、どのように私は私の「WebPACKの」中「VUE」を追加しようとをbundle.jsてるのWebPACKのbundle.js