将 Vue.js 与 Webpack 一起使用答案

【问题标题】：Using Vue.js with Webpack将 Vue.js 与 Webpack 一起使用
【发布时间】：2020-10-05 20:24:14
【问题描述】：

我是第一次使用 Vue.js，无法让最简单的代码 sn-p 工作。我目前正在使用 Webpack 将其添加到现有项目中，这就是我的 js 文件中的代码：

import Vue from 'vue'
import 'bootstrap';
...

var app = new Vue({
  el: '#toto',
  data: {
    message: 'Hello Vue!'
  }
});

我的 HTML 很长，但这是我想要做的：

<div id="main">
  <div class="container">
    <div id="toto">{{ message }}</div>
    <h2 class="title">Search results</h2>
  </div>
</div>

所以当我运行上面的 js 代码时，“toto” div 是空的。我在 Webpack 中没有收到任何编译错误，在 Chrome 控制台中也没有错误。

我做错了什么？

【问题讨论】：

你的 JS 执行了吗？尝试在文件顶部添加一些console.log('HERE)`
@BroiSatse 除 Vue 部分之外的所有 JS 代码。
我不确定你的回答是什么意思，但我会假设它是在控制台中打印出来的？代码是否在元素#toto 已加载时执行，即脚本是否在您的 html 末尾加载？
@BroiSatse 我想我在您编辑原始消息之前已回复。所以为了回答你的问题，除了 Vue 实例化之外，所有 JS 代码都可以工作（我什至在 Vue 部分之前和之后添加了日志消息）。现在奇怪的是，当我将“el”属性更改为“#main”时，整个主 div 都被清空了。有帮助吗？
所以上面的链接解决了这个问题。而且我必须删除“模板”属性才能使其工作。

【解决方案1】：

添加到 Webpack 配置文件中的以下代码起到了作用：

module.exports = {
  // ...
  resolve: {
    alias: {
      'vue$': 'vue/dist/vue.esm.js'
    }
  }
}

【讨论】：

【解决方案2】：

当您使用 Webpack 时，Vue 通常需要单文件组件 (*.vue) - 您不能将模板放入公共 HTML 文件中。所以你必须这样做：

var app = new Vue({
  el: '#toto',
  template: '{{ message }}',
  data: {
    message: 'Hello Vue!'
  }
});

【讨论】：

我不明白，但我尝试了你的代码，它没有改变任何东西。你能详细说明一下新的文件结构和变化吗？ “模板”属性有什么作用？
看看这个 JSfiddle jsfiddle.net/pc5Lubvd
我当前的带有“el”属性的代码不是从“toto”变成了“main”吗？
@IVOGELOV - 有趣的是你的小提琴没有列出template，它仍然有效。
重点是，如果你使用 Webpack（以及 *.vue 文件中的单文件组件） - 你不需要 template 属性。如果您在运行时在纯 HTML 页面上加载 Vue - 那么您必须提供模板作为字符串或 HTML 中 <template> 标记的 ID。