VueJS — как правильно сделать модульный компонент?

Question

[Михаил Р.]

Приветствую!

Через WebPack 4 + VueJS собираю приложение и получаю ошибку.

Возьмем простой пример приложения:

<template>
	<div id="hello" class="class_123">
		<h2>{{message}}</h2>
	</div>
</template>

<script>
	export default {
		name: 'app',
		data () {
			return {
				message: 'Welcome to Vue.js'
			}
		}
	}
</script>

<style>
	.class_123 {
		font-family: Verdana;
		color: navy;
	}
</style>

Разбиваю его на модули (шаблон, скрипты, стили) со следующей структурой:


main.vue (главный файл компонента):

<template src="./modal.html"></template>
<style src="./modal.css"></style>
<script src="./modal.js"></script>

modal.js:

export default {
	name: 'app',
	data () {
		return {
			message: 'Welcome to Vue.js'
		}
	}
}

modal.css:

.class_123 {
	font-family: Verdana;
	color: navy;
}

modal.html:

<div id="app" class="class_123">
	<h2>{{message}}</h2>
</div>

Получаю ошибку:


Возвращаю обратно в main.vue:

<template>
	<div id="app" class="class_123">
		<h2>{{message}}</h2>
	</div>
</template>

<style src="./modal.css"></style>
<script src="./modal.js"></script>

- работает...

Т.е. ему не нравится, что <template> вынесен в отдельный файл?

Вопросы:
1. Как решить эту проблему?
2. Правильно ли так разбивать приложение по частям?

Спасибо!

Answer 1

[Klein Maximus]

попробуйте

<template src="./modal.html" lang="html"></template>

Вообще по оформлению кода есть разные варианты, поскольку "все фломастеры на вкус и цвет разные". Я, например, начинаю делать все в одном файле. Как только объем превышает "один экран", я выношу наиболее объемную часть (шаблон, стиль или скрипт) в отдельный файл. Хотя как раз шаблон, зачатую, остается в самом файле однофайлового компонента (ну, просто это более информативнее, чем выносить его в другой файл).

P.S.: Может у Вас какой то "линтер" настроен, и из-за этого валяться ошибки?