Я пробую электрон впервые, и я поражен этим. Я, однако, ударил стену, когда пытался использовать компоненты одного файла vue.js, используя электронную форму. Моя проблема заключается в следующем:
Я создаю проект с использованием шаблона vue.js и запускаю его. Работает и выглядит отлично. У меня есть одна страница файла с индексным файлом, который выглядит так:
<div id="test"></div>
</body>
<script>
import Vue from 'vue';
import Test from './test';
const app = new Vue(Test).$mount('#test');
app.text = "Electron Forge with Vue.js!";
</script>
Пока все хорошо. Он импортирует Test, который представляет собой отдельный файловый компонент, и отображает его.
Теперь я бы хотел, чтобы другие компоненты одного файла были вложены в этот основной компонент. Например, я хотел бы иметь следующее, в моем файле приложения с именем test.vue
<template>
<h2>Hello from {{text}}</h2>
</template>
<script>
import About from './About.vue'
export default {
components: {
appAbout: About,
},
data () {
return {
text: 'Electron'
}
}
}
</script>
Опять, пока все хорошо. Я могу запустить приложение без ошибок, поэтому компонент импортируется.
Вот моя проблема: если я сейчас пытаюсь визуализировать компонент, используя <appAbout></appAbout>
, как я делал это раньше в веб-приложениях с vue.js, я получаю следующую ошибку.
В основном это говорит о том, что я не использую ни одного корневого элемента в своем компоненте, что действительно странно, потому что мой компонент выглядит так:
<template lang="html">
<div>Hello from component</div>
</template>
<script>
export default {
}
</script>
<style lang="css">
</style>
Я застрял. Может кто-нибудь помочь, пожалуйста?