Vue Cli及Webpack+vue-loader项目中根Vue实例数据无法渲染的问题

嘿，我来帮你捋捋这个问题！你碰到的核心问题是根Vue实例缺少模板内容来展示你定义的msg数据，另外代码里还有个小细节得调整，咱们一步步来搞定：

先修正重复挂载的小问题 #

你在创建Vue实例时同时写了el: "#app"和.mount('#app')，这两种挂载方式其实是等价的，选一种用就好，避免重复操作。比如改成这样：

new Vue({
  el: "#app",
  data() {
    return {
      msg: "Hello from Vue!"
    }
  }
})

或者：

new Vue({
  data() {
    return {
      msg: "Hello from Vue!"
    }
  }
}).$mount('#app');

接下来让msg正常显示在页面上 #

Vue需要明确知道把数据渲染到哪里，有几种常见的实现方式：

方式1：直接在index.html的#app元素里加模板语法 #

打开你的index.html，找到<div id="app"></div>，修改成：

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

这样Vue挂载完成后，会自动把msg的内容替换到这个位置。

方式2：在根实例里添加template选项 #

要是不想修改index.html，也可以直接在Vue实例里定义模板：

new Vue({
  el: "#app",
  data() {
    return {
      msg: "Hello from Vue!"
    }
  },
  template: '<div>{{ msg }}</div>'
})

这种情况下，Vue会用你定义的模板替换掉页面上#app元素的原有内容。

方式3：用单文件组件（Vue Cli项目推荐做法） #

既然你是用Vue Cli创建的项目，更规范的做法是用App.vue单文件组件。把你注释掉的import App from './App.vue'解开，然后用render函数渲染组件：

import Vue from 'vue'
import App from './App.vue'
Vue.config.productionTip = false

new Vue({
  render: h => h(App)
}).$mount('#app');

接着在App.vue里添加数据和模板：

<template>
  <div>{{ msg }}</div>
</template>

<script>
export default {
  data() {
    return {
      msg: "Hello from Vue!"
    }
  }
}
</script>

这是Vue Cli项目的标准结构，更适合后续复杂功能的开发。

试试上面的方法，你的msg应该就能正常显示啦！

内容的提问来源于stack exchange，提问作者peter0xfff