2017-07-29 11 views
2
でプットVUEの設定が

私は最近、学習するときのVueが定義されていない約vueキャッチされていないにReferenceError:Index.htmlと

私は、このファイルを持っているmain.js

import Vue from 'vue/dist/vue.js' 
import Buefy from 'buefy' 
import 'buefy/lib/buefy.css' 
Vue.use(Buefy) 

var App = new Vue({ 
    el: '#app', 
    data: { 
      message : "It's working" 
    } 
}) 

、ここでは私のhtmlです

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
    <meta charset="utf-8"> 
    <title>Vue Example</title> 
    </head> 
    <body> 
    <h3 id="app">{{ message }}</h3> 
    <script src="dist/build.js"></script> 

    <script> 

    </script> 
    </body> 
</html> 

これは機能しています。しかし、今私は自分のスクリプトで何かをしようとしています。私は

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
    <meta charset="utf-8"> 
    <title>Vue Example</title> 
    </head> 
    <body> 
    <h3 id="app">{{ message }}</h3> 
    <script src="dist/build.js"></script> 

    <script> 
var App = new Vue({ 
    el: '#app', 
    data: { 
     message:"It's not working" 
    } 
}) 
    </script> 
    </body> 
</html> 

この

に(私は webpackを使用しています)

import Vue from 'vue/dist/vue.js' 
import Buefy from 'buefy' 
import 'buefy/lib/buefy.css' 
Vue.use(Buefy) 

その後、私のindex.html main.jsを変更し、私は

Uncaught ReferenceError: Vue is not defined

私はこれをどのように修正することができ、このエラーを取得しますか?

+0

私は 'var App = new Vue()'は 'main.js'にあるべきだと思います。 –

答えて

6

あなたはindex.htmlで直接Vueの新しいインスタンスを作成したい場合は、あなたのindex.htmlにライブラリを含める必要があり、次のいずれか

<script src="https://unpkg.com/[email protected]"></script> 

それとも、そのようmain.jsVuewindowにオブジェクトを割り当てる必要があります:

main.js:

import Vue from 'vue'; 
window.Vue = Vue; 

index.htmlVue()にアクセスすることができます。windowオブジェクトのグローバルプロパティです。

関連する問題