我最近开始使用 CoffeeScript 开发一个应用程序，但是在尝试让它与 Vue 一起工作时，我很快就遇到了麻烦。也就是说，Vue 实例正在运行，我可以通过开发人员控制台对其进行内省(introspection)，但它没有绑定(bind)到 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 元素)。我还注意到 instance $el 属性有一个非常奇怪的值:它是一个函数，而不是 DOM 元素(使用 Firefox 和 Chrome 进行检查，这种行为对于两者都是相同的)。这怎么可能？我应该如何让它工作？
最佳答案
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'
}
关于javascript - CoffeeScript + Vue.js，Vue 实例没有安装在 html 元素上，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53026123/