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

Question

I recently started developing an app with CoffeeScript, but while trying to get it to work with Vue, I quickly run into trouble. 我最近开始使用CoffeeScript开发应用程序，但是在尝试使其与Vue一起使用时，我很快遇到了麻烦。 Namely, Vue instance is working, I can introspect it through developer console, but it doesn't get binded to DOM element, even though I tried it both by specyfing "el" attribute on instance and using $mount method on it. 也就是说，Vue实例正在运行，我可以通过开发人员控制台对其进行内部检查，但是它不会绑定到DOM元素，即使我通过在实例上指定"el"属性并在其上使用$mount方法也尝试了它。 Heres my main.coffee: 这是我的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

My index.html: 我的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>

My package.json: 我的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"
  }
}

And finally my webpack.config.js: 最后是我的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",
      }
    ]
  },
}

So, unfortunately, template doesn't get rendered (div element is even not created at all). 因此，不幸的是，模板无法渲染（根本没有创建div元素）。 I noticed also that instance $el attribute has very strange value: it's a function, instead of DOM element (checked with Firefox and Chrome, this behaviour is the same for both). 我还注意到实例$el属性的值非常奇怪：它是一个函数，而不是DOM元素（使用Firefox和Chrome进行检查，两者的行为相同）。 How is it possible? 这怎么可能？ How should I get it to work? 我应该如何工作？

Answer 1

The default webpack version of vue only includes the vue runtime, not the template compiler. vue的默认Webpack版本仅包括vue运行时，而不包括模板编译器。

To check, you can write your own render method (which the compiler normally generates at compile time) 要进行检查，您可以编写自己的render方法（编译器通常在编译时生成该方法）

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

If you can't compile all templates at compile time, use the compiled-included build by editing your webpack.config.js: 如果无法在编译时编译所有模板，请通过编辑webpack.config.js使用包含编译的内部版本：

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

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

问题描述

1 个解决方案

解决方案1
1 已采纳 2018-10-28 07:31:13

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

问题描述

1 个解决方案

解决方案1 1 已采纳 2018-10-28 07:31:13

解决方案1
1 已采纳 2018-10-28 07:31:13