2 ответа
Я попробовал http-vue-loader, и он хорошо работает. Эта библиотека проста в использовании и имеет хорошую документацию и примеры
, Хотя Вы не можете загрузить шаблоны из зарегистрированного непосредственно, все еще можно сохранить HTML в отдельных однофайловых компонентах. Можно даже пропустить <script>...</script> часть.
Использование (из документации загрузчика)
my-component.vue
<template>
<div class="hello">Hello {{who}}</div>
</template>
index.html
<!doctype html>
<html lang="en">
<head>
<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/http-vue-loader"></script>
</head>
<body>
<div id="my-app">
<my-component></my-component>
</div>
<script type="text/javascript">
new Vue({
el: '#my-app',
components: {
'my-component': httpVueLoader('my-component.vue')
}
});
</script>
</body>
</html>
Оба файла должны быть помещены в одну папку на том же уровне
существует по крайней мере 2 способа достигнуть того, на чем Вы хотите, их (x-шаблоны), уже упомянутые Bill Criswell, но я думаю это стоящий добавления, что пример
-
Определяет Ваш компонент как это
Vue.component('my-checkbox', { // id of x-template template: '#my-template' }); -
, Добавляет файл HTML с Вашим x-шаблоном (идентификатор должен соответствовать тому, который Вы указали в компоненте)
<script type="text/x-template" id="my-template">...</script>
Другой подход (и мне нравится этот лучше), должен был бы использовать встроенный шаблон
-
, Определяют Ваш шаблон как это
Vue.component('my-template', {}); -
, Добавляют, что файл HTML с Вашим компонентом и шаблоном в нем
<my-template inline-template>place for your html</my-template>
Просто не забывает добавлять inline-template атрибут, иначе это не будет работать