Как подключать шаблоны в Vue.js и еще вопрос по структуре приложения?

Question

[Михаил]

Начал изучать JavaScript и попутно Vue.js

1 .Использую роутер vuejs.github.io/vue-router/en/basic.html

Везде в примерах подключение компонента и шаблона указано что-то типа :

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

но для больших компонентов не удобно писать html в js файле, получается что-то вроде:

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>'
});

а тут еще даже половины html кода нет.

Каким образом лучше создавать шаблоны?

2. Вопрос по поводу структуры всего приложения, я сейчас начал делать так:
разбил все по разным файлам
router.js - здесь подключаются компоненты с шаблонами и router.map
папка с моделями
/models/guestbook.js - модель для добавления комментариев и вывода списка комментариев.
/models/news.js - модель новости

все файлы подключаются в файле index.html

Правильная ли это структура или возможны другие варианты?

Answer 1

[maxzabl]

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

В коде страницы

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

Если строка начинается с # будет использоваться querySelector и использовать innerHTML выбранного элемента в качестве строки шаблона

Comments

[Максим]

Ну есть ещё вариант. Создаёте

<template id="template-for-your-component">content</template>

И затем в компоненте указываете template: '#template-for-your-component'
Так эти ваши div не будут рендериться.

Answer 2

[sanex3339]

Я видел способ через require('template.html')

Answer 3

[Klein Maximus]

Используйте однофайловые компоненты - https://ru.vuejs.org/v2/guide/single-file-componen... - это удобнее

Answer 4

[Евгений]

Как сказано выше, копайте в сторону require, он может грузить js динамически, есть возможность загрузки текста(html) шаблоны и json. Заведите директорию template где будут хранится шаблоны.