我尝试使用 jspm 和 vue.js 构建简单的应用程序。
这是我的 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 被注释节点所取代。
你也可以在Vue对象的$el中看到注释节点:
当我从单独的文件(例如从 jspm_packages/npm/vue@2.1.10/dist/vue.min.js 下载的 jspm 文件)使用 Vue 时，一切正常。
你可以在这个 fiddle 中看到这个问题(js 是整个包):
https://jsfiddle.net/oz7c82rw/
我的代码有什么问题？为什么dom节点呈现为空注释？
最佳答案
import Vue from "vue" 将引入不包含模板编译器的 runtime-only 构建，这意味着您将需要 预编译你的模板。如果您采用您的示例并使用 runtime-only 构建，您应该收到以下消息:
[Vue warn]: Failed to mount component: template or render function not defined. (found in root instance)
如您所见:https://jsfiddle.net/aqxL6sjL/
为了让它与仅运行时构建一起工作，我需要在 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和 vue-loader分别与 browserify 和 webpack 一起使用时执行，因此不需要模板编译器。如果您使用的是 jspm，您可能想看看:systemjs-plugin-vue ，但是，它不再维护，因此它可能不再有效。
我建议最简单的方法是捆绑 standalone-build 而不是 runtime only 构建。我不使用 jspm，但我想它应该是这样的:
import Vue from 'vue/dist/vue.common.js';
但这里的问题是，当使用第三方库时，您可能会同时导入运行时和独立构建，这会导致错误，因此建议为它们设置别名，以便您获得正确的构建，但是，我不能说你是如何做到的jspm 会这样做，但我猜这是 map 功能:https://github.com/jspm/registry/wiki/Configuring-Packages-for-jspm#map-configuration .
我从不对开发人员选择的工具持保留意见，但如果您要开始一个新的 vue 项目，我建议您使用 webpack 或 browserify 相反，因为它们有更好的支持，甚至可以通过 vue-cli 直接拉入脚手架。 .从长远来看，这可能会为您在尝试启动和运行项目以及将来寻求帮助时省去很多麻烦。
关于ecmascript-6 - 在 VueJS + JSPM 中作为注释呈现的组件，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42124812/