在VueJS + JSPM中以注释形式呈现的组件 [英] Component rendered as comment in VueJS + JSPM
问题描述
我试图使用带有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被注释节点替换.
您还可以在Vue对象的$el中看到注释节点:
当我从单独的文件(例如从jspm_packages/npm/vue@2.1.10/dist/vue.min.js的jspm文件下载的文件)中使用Vue时，一切正常.
您可以在此小提琴中看到此问题的重现(js是完整包):
https://jsfiddle.net/oz7c82rw/
我的代码有什么问题?为什么dom节点呈现为空注释?
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 和 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 拉入脚手架的地步.从长远来看，这可能会让您省去尝试启动项目和运行以及将来寻求帮助的麻烦.
I tried to build simple app using jspm with vue.js.
This is my html file:
<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>
My main.js file:
import Vue from "vue"
const app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
});
I'm building self-executing bundle like this:
jspm bundle-sfx main.js bundle.js
When I open browser I can see that node div#app is replaced by comment node.
You can also see comment node in $el in Vue object:
When I use Vue from separate file (for example from downloaded by jspm file from jspm_packages/npm/vue@2.1.10/dist/vue.min.js) everything works correctly.
You can see this issue reproduced in this fiddle (js is whole bundle):
https://jsfiddle.net/oz7c82rw/
What's wrong with my code? Why dom node is rendered as empty comment?
import Vue from "vue" will pull in the runtime-only build which does not include the template compiler, this means that you will need to have pre-compiled your templates. If you take your example and use the runtime-only build you should receive the following message:
[Vue warn]: Failed to mount component: template or render function not defined. (found in root instance)
As you can see here: https://jsfiddle.net/aqxL6sjL/
In order to get that to work with the runtime-only build, I would need to create a render function on the Vue instance, like so:
const app = new Vue({
el: '#app',
render: function(createElement) {
return createElement('div', {}, this.message)
},
data: {
message: 'Hello Vue!'
}
});
Here's the updated fiddle: https://jsfiddle.net/aqxL6sjL/1/
And that is what 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, however, it's no longer maintained, so it may no longer work.
I would suggest that the easiest route is to bundle the standalone-build instead of the runtime only build. I don't use jspm, but I guess it would be something like:
import Vue from 'vue/dist/vue.common.js';
The issue there though is that you may get both the runtime and standalone builds being imported when using third party libraries which will cause errors, so it's recommended to alias them so you get the correct build, however, I cannot say how you would do this is jspm but I would guess that it's the map functionality: https://github.com/jspm/registry/wiki/Configuring-Packages-for-jspm#map-configuration.
I'm never opinionated about a developers choice of tools, but if you are starting a fresh vue project, I would suggest you use webpack or browserify instead, because they have much better support, even down to the point that you can pull in scaffolding directly via the vue-cli. In the long run that may save you quite a lot of hassle in trying to get your projects up and running and asking for help in future.
这篇关于在VueJS + JSPM中以注释形式呈现的组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
