Starting with Vue.js and nothing is displayed-CodePudding

I am trying to start using vue.js and having issue setting it up. In my package.json I installed the latest version "vue": "^2.6.14", and in my main.js folder I included like this

import Vue from "vue";
var app = new Vue({
    el: '#app',
    data: {
      message: 'Hello Vue!'
    }
  })

and in my html file I added this:

<div id="app">
  {{ message }}
</div>

when webpack compiles, it creates this main.js file but the {{ message }} is not changed to Hello Vue!. What I am doing wrong here that this is not working?

Also no error is showing in dev tools.

CodePudding user response：

import Vue from "vue";

new Vue({
   data() {
       return {
          message: 'Hello Vue!',
       };
   },
}).$mount('#app');

CodePudding user response：

Try

import Vue from "vue";
var app = new Vue({
    el: '#app',
    data () {
      return {
        message: "Hello Vue!"
      }
    }
  }).$mount('#app');

This would solve your problem