Question

我正在使用vue和laravel创建一个聊天应用，它是ChatMessage.vue代码：

<template lang="html">
<div class="container">
    <p>Message text is here</p>
    <small>Author name</small>
</div>
</template>

<script>
export default { 
}
</script>
<style lang="css">
</style>

这是我的app.js代码：

require('./bootstrap');

window.Vue = require('vue');
Vue.component('example', require('./components/Example.vue'));
Vue.component('chat-message', require('./components/ChatMessage.vue'));

const app = new Vue({
  el: '#app'
});

我的chat.blade.php查看代码：

<!DOCTYPE html>
<html>
<head>
  <title>Chatroom</title>
  <link rel="stylesheet" type="text/css" href="css/app.css">
</head>
<body>
<div id="app">
    <h1>
        Chat
    </h1>
    <chat-message></chat-message>
    {{-- <chat-log></chat-log>
    <chat-composer></chat-composer> --}}
</div>

<script type="text/javascript" src="js/app.js"></script>
</body>
</html>

我收到此错误：“ [Vue警告]：未知的自定义元素：-您是否正确注册了组件？对于递归组件，请确保提供”名称“选项。”

Answer 1

删除评论

在链接资源中使用资产功能

<!DOCTYPE html>
    <html>
    <head>
      <title>Chatroom</title>
      <link rel="stylesheet" type="text/css" href="{{asset('css/app.css')}}">
    </head>
    <body>
    <div id="app">
        <h1>
            Chat
        </h1>

        <chat-message></chat-message>

    </div>

    <script type="text/javascript" src="{{asset('js/app.js')}}"></script>
    </body>
    </html>

如何解决未知的自定义元素问题？

1 个答案: