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

Question

我最近开始使用 CoffeeScript 开发一个应用程序，但是在尝试让它与 Vue 一起工作时，我很快运行遇到了麻烦。也就是说，Vue 实例正在运行，我可以通过开发人员控制台对其进行内省，但它不会绑定到 DOM 元素，即使我通过实例上的 specyfing "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 元素）。我还注意到 instance $el 属性有一个非常奇怪的值：它是一个函数，而不是 DOM 元素（使用 Firefox 和 Chrome 进行了检查，两者的行为相同）。这怎么可能？我应该如何让它工作？

Answer 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'
}

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

CoffeeScript + Vue.js, Vue instance doesn't get mounted on html element

javascript

coffeescript

webpack

vue.js