Create vue components with raw html

I know how to create a vue component constructor with simple html:

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

But how to create it with a piece of DOM like this:

<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>

Am I supposed to mix DOM strings with JS code in a JS file? I feel sick to do that.

Also, I have done some search and one solution may look like this:

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

However, this solution requires me to stick with some bundle tools like webpack or browserify.

Is there a way to create vue component clean(DOM saved in a sepearate file) and simple(not using bundle tools)?

Solution

Finally, it seems that I have no choice but to stick with webpack.

Here, follow this article and you will gain basic knowledge about the webpack, including definition and installation and configuration and usage.Diving into Webpack

After you installed the webpack, you may want to webpack your js files like this:

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

However, you may end up with an error like following in your CLI:

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

Don't worry, this is happening because the webpack requires different loaders to handle with different type of files, such as html, css, less.For more detail, check this: webpack.github.io/docs/list-of-loaders.html#styling

So, install the html-loader to handle with html files.

And then change your js file into:

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

and webpack it in your CLI, everything should work as expected now!