Vue.js 2消除no-undef错误后页面绑定的message信息无法显示

• 最初的'Vue' is not defined no-undef是ESLint校验报错，原因是你在About.vue中直接使用Vue全局变量但未导入，你添加导入语句后该报错消失，但产生了新的写法错误导致数据不渲染。
• Vue单文件组件（.vue后缀的文件）不允许直接通过new Vue创建实例，你在main.js中已经初始化了根Vue实例，路由匹配到的页面组件只需导出组件配置即可，不需要手动实例化、手动挂载节点。
• 你指定的挂载目标el: "#about"不存在，模板中只有class="about"的节点，就算匹配到id，组件未渲染到DOM时也无法找到对应节点完成数据绑定。
• Vue组件的data选项必须是函数返回数据对象，不能直接写对象，避免多组件实例数据互相污染。

仅需修改views/About.vue的<script>部分代码即可，修改后完整代码如下：

<template>
  <div class="about">
    <h1>This is an about page</h1>
    <p>{{ message }}</p>
  </div>
</template>

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

main.js的代码无需修改，你写的根实例配置是正确的。

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