How to include templates in Vue.js and another question about the application structure?

Question

Vue.js

I started learning JavaScript and along the way Vue.js 1. I use the vuejs.github.io/vue-router/en/basic.html

router .

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

but for large components it is not convenient to write html in a js file, it turns out something like:

var Guestbook = Vue.extend({
    template: '<div id="guestbook" style="width: 450px">' +
        '<h3>Новый комментарий</h3>'+
        '<form v->' +
            '<div class="form-group">' +
                '<label for="">Ваше имя</label>'+
                '<input type="text" class="form-control">' +
            '</div>'+
            '<div class="form-group">' +
                '<label for="">Комментарий</label>'+
                '<textarea class="form-control"></textarea>' +
            '</div>'+
            '<div class="form-group">' +
                '<button type="submit" class="btn btn-success">Отправить</button>'+
            '</div>'+
        '</form>'+
        '<h2>Комментарии</h2>' +
        '<article v-repeat="comment: comments">' +
            '<h3>{{comment.name}}</h3>' +
            '<p>{{comment.content}}</p>' +
        '</article>' +
    '</div>'
});

and here even half of the html code is missing.

What is the best way to create templates?

2. A question about the structure of the entire application, I just started doing this: I
broke everything into different files
router.js - components with templates are connected here and router.map
folder with models
/models/guestbook.js - a model for adding comments and displaying a list comments.
/models/news.js - news model

all files are included in the index.html file

Is this the correct structure or are there other options?

Answer 1

var Foo = Vue.extend({
    template: '#view1'
})
var Bar = Vue.extend({
    template: '#view2'
})

In the page code

<div class="hiden">
    <div id="view2">
        ......
    </div>
    <div id="view2">
       ...
    </div>
</div>

If the string starts with # the querySelector will be used and the selected element's innerHTML will be used as the template string

Answer 2

I have seen a way via require('template.html')

Answer 3

Use single-file components - https://ru.vuejs.org/v2/guide/single-file-componen... - it's more convenient

Answer 4

As mentioned above, dig towards require, it can load js dynamically, it is possible to load text (html) templates and json. Create a template directory where templates will be stored.