在 VueJS + JSPM 中作为注释呈现的组件

Question

我尝试使用带有 vue.js 的 jspm 构建简单的应用程序。

这是我的 html 文件：

<html>
    <head>
        <script src="bundle.js"></script>
        <!--script src="jspm_packages/npm/vue@2.1.10/dist/vue.min.js"></script-->
    </head>
    <body>
       <div id="app">
          {{ message }}
        </div>
    </body>
</html>

我的 main.js 文件：

import Vue from "vue"

const app = new Vue({
    el: '#app',
    data: {
        message: 'Hello Vue!'
    }
});

我正在构建这样的自执行包：

jspm bundle-sfx main.js bundle.js

当我打开浏览器时，我可以看到节点 div#app 被注释节点所取代。

您还可以在$el中看到注释节点在Vue对象中：

当我从单独的文件（例如从 jspm_packages/npm/vue@2.1.10/dist/vue.min.js 下载的 jspm 文件）使用 Vue 时，一切正常。

您可以在 fiddle 中看到此问题的再现（js 是整个包）：

https://jsfiddle.net/oz7c82rw/

我的代码有什么问题？为什么 dom 节点呈现为空注释？

Answer 1

import Vue from "vue" 将引入不包含模板编译器的 runtime-only 构建，这意味着您将需要 pre-compiled 您的模板。如果您以您的示例并使用 runtime-only 构建，您应该收到以下消息：

[Vue warn]: Failed to mount component: template or render function not defined. (found in root instance)

如您所见：https://jsfiddle.net/aqxL6sjL/

为了让它与 runtime-only 构建一起工作，我需要在 Vue 实例上创建一个渲染函数，如下所示：

const app = new Vue({
  el: '#app',
  render: function(createElement) {
    return createElement('div', {}, this.message)
  },
  data: {
    message: 'Hello Vue!'
  }
});

这是更新后的 fiddle：https://jsfiddle.net/aqxL6sjL/1/

这就是 vueify and vue-loader do when used with browserify and webpack respectively, therefore the template compiler is not needed. If you are using jspm you may want to take a look at: systemjs-plugin-vue，但是，它不再维护，因此可能不再有效。

我建议最简单的方法是捆绑 standalone-build 而不是 runtime only 构建。我不使用 jspm，但我想应该是这样的：

 import Vue from 'vue/dist/vue.common.js';

问题是，当使用第三方库时，您可能会同时导入运行time 和 standalone 构建，这会导致错误，因此建议为它们设置别名，以便获得正确的构建，但是，我不能说你会如何做到这一点 jspm 但我猜这是地图功能：https://github.com/jspm/registry/wiki/Configuring-Packages-for-jspm#map-configuration.

我从不对开发人员选择的工具发表意见，但如果您要开始一个新的 vue 项目，我建议您改用 webpack 或 browserify，因为他们有更好的支持，甚至可以通过 vue-cli 直接拉入脚手架。在漫长的运行中，这可能会为您在尝试启动项目和运行ning 以及将来寻求帮助时省去很多麻烦。

Answer 2

不幸的是，被接受的答案不是我的问题。我的问题是我的组件运行中有一个错误 runtime-only 构建破坏了 UI 给了我奇怪的注释掉的结果。直到我从使用 prod 构建切换到 dev 构建并使用 Vue 开发工具时，我才知道这一点。一旦我这样做了，错误就很明显了。我修复了它，然后组件又回来了。

在 VueJS + JSPM 中作为注释呈现的组件

Component rendered as comment in VueJS + JSPM

ecmascript-6

vue.js

systemjs

jspm