CoffeeScript + Vue.js，Vue 实例未安装在 html 元素上答案

【问题标题】：CoffeeScript + Vue.js, Vue instance doesn't get mounted on html elementCoffeeScript + Vue.js，Vue 实例未安装在 html 元素上
【发布时间】：2018-10-28 15:45:45
【问题描述】：

我最近开始使用 CoffeeScript 开发一个应用程序，但是在尝试让它与 Vue 一起工作时，我很快就遇到了麻烦。也就是说，Vue 实例正在工作，我可以通过开发者控制台对其进行自省，但它没有绑定到 DOM 元素，即使我通过在实例上指定 "el" 属性和在其上使用 $mount 方法都尝试了它。这是我的 main.coffee：

import Vue from "vue"

app = new Vue
  el: "#app" 
  data:
    n: 42

console.log app #so I can introspect it in console
# as webpack apparently does some sort of name mangling

我的 index.html：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
</head>
<body>
  <div id="app">Answer to the Ultimate Question of Everything: {{ n }}</div>
  <script src="./dist/main.bundle.js"></script>
</body>
</html>

我的 package.json：

{
  "name": "coffee-app",
  "devDependencies": {
    "coffee-loader": "^0.9.0",
    "webpack": "^4.23.1",
    "webpack-cli": "^3.1.2",
    "coffeescript": "^2.3.2",
    "vue": "^2.5.17"
  }
}

最后是我的 webpack.config.js：

const webpack = require("webpack");
const path = require("path");

module.exports = {
  entry:  __dirname + "/main.coffee",
  output: {
    filename: "main.bundle.js",
    path: path.resolve(__dirname, "dist")
  },
  module: {
    rules: [
      {
        test: /\.coffee?$/,
        use: "coffee-loader",
      }
    ]
  },
}

因此，不幸的是，模板没有被渲染（甚至根本没有创建 div 元素）。我还注意到实例 $el 属性具有非常奇怪的值：它是一个函数，而不是 DOM 元素（使用 Firefox 和 Chrome 进行检查，两者的行为相同）。这怎么可能？我应该如何让它工作？

【问题讨论】：

标签： javascript vue.js webpack coffeescript

【解决方案1】：

vue 默认的 webpack 版本只包含 vue 运行时，不包含模板编译器。

要检查，您可以编写自己的渲染方法（编译器通常在编译时生成）

app = new Vue
  el: "#app" 
  data:
    n: 42
  render: (h) -> h("h1", "Hello")

如果您无法在编译时编译所有模板，请通过编辑 webpack.config.js 来使用已编译包含的构建：

alias: {
  'vue$': 'vue/dist/vue.esm.js'
}

【讨论】：

有没有办法在使用 npm 和 webpack 的 vue 时包含模板编译器（这样我就可以避免这些“类似反应”的渲染）？
是的，我已经更新了我的答案以包含您需要进行的 webpack 修改。