将 Vue.js 与 Webpack 一起使用

Question

我第一次使用 Vue.js 并且无法让最简单的代码片段工作。 我目前正在使用 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 控制台中也没有错误。

我究竟做错了什么？

Answer 1

我在这里找到了解决方案： Vue replaces HTML with comment when compile with webpack

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

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

Answer 2

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

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