Блог

Я пытаюсь распознать этот компонент заголовка, но это просто не так. Я пытался испортить настройку eslint на строгое значение и безрезультатно возился со своим синтаксисом. Я не понимаю, это должно быть так просто. Любая помощь будет признательна.

Приложение.vue

 lt;templategt;  lt;div class="container"gt;  lt;header /gt;  lt;/divgt; lt;/templategt;  lt;scriptgt; import header from './components/header'  export default {  name: 'App',  components: {  header,  } } lt;/scriptgt;  lt;stylegt;  lt;/stylegt;  

main.js

 import { createApp } from 'vue' import App from './App.vue'  createApp(App).mount('#app')  

index.html

 lt;!DOCTYPE htmlgt; lt;html lang=""gt;  lt;headgt;  lt;meta charset="utf-8"gt;  lt;meta http-equiv="X-UA-Compatible" content="IE=edge"gt;  lt;meta name="viewport" content="width=device-width,initial-scale=1.0"gt;  lt;link rel="icon" href="lt;%= BASE_URL %gt;favicon.ico"gt;  lt;titlegt;lt;%= htmlWebpackPlugin.options.title %gt;lt;/titlegt;  lt;/headgt;  lt;bodygt;  lt;noscriptgt;  lt;stronggt;We're sorry but lt;%= htmlWebpackPlugin.options.title %gt; doesn't work properly without JavaScript enabled. Please enable it to continue.lt;/stronggt;  lt;/noscriptgt;  lt;div id="app"gt;  lt;/divgt;  lt;!-- built files will be auto injected --gt;  lt;/bodygt; lt;/htmlgt;  

заголовок.vue

 lt;templategt;  lt;headergt;  lt;h1gt;Component headerlt;/h1gt;  lt;/headergt;  lt;/templategt;  lt;scriptgt; export default {  name: 'header', }; lt;/scriptgt;  lt;stylegt;  header {  display: flex;  } lt;/stylegt;  

Любая помощь была бы потрясающей. Спасибо.

Потребности main.js , которые необходимо импортировать в index.html :

 lt;bodygt;  lt;div id="app"gt;lt;/divgt;  lt;script type="module" src="/src/js/main.js"gt;lt;/scriptgt;  lt;/bodygt;  

(используя правильный путь)

Лучше переименовать компонент заголовка в другое слово, потому lt;headergt; что он используется в качестве стандартного имени тега в html