Я пытаюсь узнать больше о Vue.js, но борюсь с проблемой.Я пытаюсь использовать файлы .vue, чтобы у меня был код шаблона внутри этого файла.Мой HTML-код выглядит следующим образом.
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<script src="vue.js"></script>
<script src="require.js"></script>
</head>
<body>
<div id="app">
<navbar-component></navbar-component>
</div>
<script src="./main.js"></script>
</body>
</html>
А мой рабочий код JavaScript / Vue.js выглядит следующим образом.
Vue.component('navbar-component', {
template: '<h3>Title</h3>'
});
const demo = new Vue({
el: '#app',
mounted() {
console.log('mounted');
}
});
Проблема заключается в том, что я изменяю его для использования этого JavaScript.Когда я пытаюсь загрузить файл test.vue, он больше не работает, и я получаю эту ошибку.
require.js:168 Uncaught Error: Module name "src/components/test.vue" has not been loaded yet for context: _. Use require([])
https://requirejs.org/docs/errors.html#notloaded
at makeError (require.js:168)
at Object.localRequire [as require] (require.js:1436)
at requirejs (require.js:1797)
at main.js:1
Мой последний тестовый код выглядит следующим образом:
main.js
Vue.component('navbar-component', require('./src/components/test.vue'));
const demo = new Vue({
el: '#app',
mounted() {
console.log('mounted');
}
});
src / components / test.vue
<template>
<div class="helloworld">
<h1>Hello world</h1>
</div>
</template>
<script>
</script>