Question

我试图了解有关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>

组件加载导致“尚未为上下文加载模块名称”

0 个答案: