VueJS的X-Templates可以将模板独立到单个文件吗？

Question

各位好，我在学习Vue组件的时候遇到一些问题。
我想将组件做成公共组件，然后通过引用js的方式来进行模板注册。

<div id="watch-example">
        <hello-world></hello-world>
    </div>
    <script type="text/x-template" id="hello-world-template">
        <p>Hello World</p>
    </script>
    <script type="text/javascript">
        Vue.component("hello-world", {
            template: "#hello-world-template"
        });
        var vm = new Vue({
            el: "#watch-example"
        })
    </script>

示例代码如上，我想将Vue.component，单独提取到一个js文件中。
但是他引用的 text/x-template，在js文件中是无法编译的。
请问我通过什么办法，才能把公共组件提取出来呢？

Answer 1

方法一： .vue单文件组件，这是比较后面的知识，所以前期不用担心模板怎么去独立到一个文件。单文件组件
方法二： 是针对你这种只需要将模板放到一个独立的文件。参考 异步组件

把模板放到一个HTML文件里，这个就比较灵活，放txt文件里也行。

#com.html
<p>Hello World</p>

主文件里通过异步的方式注册组件,我用的是jq的数据请求，做个例子。其实可以用vue-resource，随意。

#main.js
Vue.component('hello-world', function (resolve, reject) {
    // 可以请求一个html文件，既然存放模板还是html文件存放比较好
    $.get("./com.html").then(function (res) {
        resolve({
            template: res
        })
    });
});

Answer 2

建议学习了解一下 Vue 的单文件组件以及 webpack

Answer 3

不可以。因为你在html里可以声明type="text/x-template"， 这样的好处是html不会渲染里面的内容，也就是里面的html不会展示出来。如果封装到js的单独文件，要用字符串模板。其实即使是单文件 .vue最后也是要解析成浏览器识别的js

Answer 4

需要吧 x-template 内的内容放到你组件的 template 属性中。
例如你问题中的例子，就需要。

 Vue.component("hello-world", {
     template: "<p>Hello World</p>"
 });

Answer 5

你的需求可以在学习完webpack之后自己写一个webpack的loader来实现这个转换过程。目前好像确实没有现成的解决方案可以完成你的需求。