Uncaught ReferenceError: Vue is not defined when put vue setting in Index.html : <p>i recently learning about <code>vue</code></p>

<p>I have this file <code>main.js</code></p>

<pre><code>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"
    }
})
</code></pre>

<p>and here is my html</p>

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

    &lt;script&gt;

    &lt;/script&gt;
  &lt;/body&gt;
&lt;/html&gt;
</code></pre>

<p>It's working. But, now i'm trying to do something with my script. I change <code>main.js</code> (I'm using <code>webpack</code>)</p>

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

<p>then my index.html to this</p>

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

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

<p>and i get this error</p>

<blockquote>
  <p>Uncaught ReferenceError: Vue is not defined</p>
</blockquote>

<p>How can i fix this ? </p>
