Question

我最近开始使用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中进行了检查，两者的行为相同）。这怎么可能？我应该如何使用它？

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元素上

1 个答案: