Приветствую!
Через 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. Правильно ли так разбивать приложение по частям?
Спасибо!
Средний
