从 Vue.js 开始，什么都没有显示答案

【问题标题】：Starting with Vue.js and nothing is displayed从 Vue.js 开始，什么都没有显示
【发布时间】：2021-10-15 00:13:46
【问题描述】：

我正在尝试开始使用 vue.js，但在设置时遇到了问题。在我的 package.json 中，我安装了最新版本的 "vue": "^2.6.14", 并在我的 main.js 文件夹中像这样包含了

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

在我的 html 文件中我添加了这个：

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

当 webpack 编译时，它会创建这个 main.js file 但 {{ message }} 不会更改为 Hello Vue!。我在这里做错了什么，这不起作用？

开发工具中也没有显示错误。

【问题讨论】：

您可能希望将 data 属性和 template={{message}} 移动到 App.vue 而不是 main.js 和 index.html。
检查浏览器的开发工具控制台是否有错误
@Phil 谢谢，但没有错误
您将不得不完成您正在采取的所有步骤......您是如何开始这个项目的？你在使用 Vue CLI 吗？您正在运行哪些命令来运行或构建您的项目？您在浏览器中打开的地址是什么？
如您所见here，您的代码运行良好

标签： javascript vue.js vuejs2

【解决方案1】：

试试

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

这会解决你的问题

【讨论】：

我会在哪里添加这个？到文件末尾？
我编辑了我的答案，您需要将数据对象替换为函数

【解决方案2】：

import Vue from "vue";

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

【讨论】：

不幸的是仍然没有显示任何内容，我还添加了 window.Vue = Vue; 但没有显示任何内容
你确定在你的html中包含js文件吗..
是的，我检查了源代码并加载了 main.js - 内容是我发布的问题。
是的兄弟，你没有在 html 中包含你的 js 文件。工作正常。 codepen.io/pen/?editors=1111