在VueJS + JSPM中呈现为注释的组件
Krz*_*sik 4 ecmascript-6 systemjs vue.js jspm
我尝试使用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被注释节点替换.
您还可以$el在Vue对象中看到注释节点:
当我从单独的文件中使用Vue时(例如从jspm文件下载jspm_packages/npm/vue@2.1.10/dist/vue.min.js),一切正常.
你可以看到这个问题在这个小提琴中重现(js是整个包):
https://jsfiddle.net/oz7c82rw/
我的代码出了什么问题？为什么dom节点呈现为空注释？
cra*_*g_h 11
import Vue from "vue"将拉入runtime-only不包含模板编译器的构建,这意味着您将需要拥有pre-compiled模板.如果你拿你的例子并使用runtime-only构建,你应该收到以下消息:
[Vue警告]:无法安装组件:模板或渲染函数未定义.(在根实例中找到)
正如你在这里看到的:https://jsfiddle.net/aqxL6sjL/
为了使它与仅运行时的构建一起工作,我需要在Vue实例上创建一个渲染函数,如下所示:
const app = new Vue({
el: '#app',
render: function(createElement) {
return createElement('div', {}, this.message)
},
data: {
message: 'Hello Vue!'
}
});
这是更新的小提琴:https://jsfiddle.net/aqxL6sjL/1/
而这正是vueify和VUE装载机当用于做browserify和webpack分别,因此不需要模板编译器.如果您正在使用,jspm您可能需要查看:systemjs-plugin-vue,但是,它不再被维护,因此它可能不再起作用.
我建议最简单的方法是捆绑standalone-build而不是runtime only构建.我不使用jspm,但我猜它会是这样的:
import Vue from 'vue/dist/vue.common.js';
那里的问题是你可能会在使用第三方库时导致运行时和独立构建都被导入,这会导致错误,所以建议别名它们以便你得到正确的构建,但是,我不能说你将如何做到这一点是jspm,但我猜想,它的地图功能:https://github.com/jspm/registry/wiki/Configuring-Packages-for-jspm#map-configuration.
我从不反对开发人员选择工具,但如果你要开始一个新vue项目,我会建议你使用webpack或browserify代替,因为他们有更好的支持,甚至可以直接通过支架直接拉入脚手架.vue-cli.从长远来看,为了让你的项目正常运行并在将来寻求帮助,可能会为你节省很多麻烦.