components - 使用原始 html 创建 vue 组件

Question

我知道如何用简单的 html 创建一个 vue 组件构造器:

var Foo = Vue.extend({
    template: '<p>This is foo!</p>'
})

但是如何用这样的 DOM 来创建它:

<div id="phone-list">
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-2">
                Search: <input v-model="query">
                Sort by:
                <select v-model="orderProp">
                    <option value="name">Alphabetical</option>
                    <option value="age">Newest</option>
                </select>
            </div>
            <div class="col-md-10">
                <p>There is {{p.length}} phones total.</p>
                <ul class="phones">
                    <li v-for="phone in p.data | filterBy query | orderBy orderProp " class="thumbnail">

                        <a :href="'#/phones/' + phone.id" class="thumb"><img :src="phone.imageUrl"></a>
                        <a :href="'#/phones/' + phone.id">{{phone.name}}</a>
                        <p>{{phone.snippet}}</p>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>

我应该在 JS 文件中混合 DOM 字符串和 JS 代码吗？我觉得这样做很恶心。

另外，我做了一些搜索，一个解决方案可能是这样的:

Vue.extend({
    template: require('./call.html'),
    props: {
        call: {
            type: Object,
            required: true
        }
    },
    //...

但是，此解决方案要求我坚持使用一些捆绑工具，例如 webpack 或 browserify。

有没有办法创建 vue 组件干净(DOM 保存在单独的文件中) 和简单(不使用捆绑工具)？

Answer 1

最后，看来我别无选择，只能坚持使用webpack。

在这里，跟着这篇文章，你将获得关于webpack的基本知识，包括定义和安装以及配置和使用。 Diving into Webpack

在你安装了 webpack 之后，你可能想要像这样 webpack 你的 js 文件:

Vue.extend({
    template: require('./call.html'),
    props: {
        call: {
            type: Object,
            required: true
        }
    },
    //...

但是，您最终可能会在 CLI 中遇到如下错误:

<div class="main"> Unexpected Token
...
...

别担心，这是因为 webpack 需要不同的加载器来处理不同类型的文件，例如 html、css、less。有关更多详细信息，请查看: webpack.github.io/docs/list-of-loaders.html#styling

因此，安装 html-loader处理 html 文件。

然后把你的js文件改成:

Vue.extend({
    template: require('html!./call.html'),
    props: {
        call: {
            type: Object,
            required: true
        }
    },
    //...

和 webpack 它在你的 CLI 中，现在一切都应该按预期工作了!