[Vue 警告]：未知的自定义元素：<app> - 您是否正确注册了组件？（在发现<root> )</root></app>

Question

I'm trying to setup Vue in Laravel 6.我正在尝试在 Laravel 6 中设置 Vue。

I've ran:我跑过：

composer require laravel/ui作曲家需要 laravel/ui

php artisan ui vue php 工匠 ui vue

npm install && npm run dev npm 安装 && npm 运行开发

Then inside of welcome.blade.php, i've deleted the body of the welcome page and added a div with the id of root.然后在welcome.blade.php 中，我删除了欢迎页面的正文并添加了一个ID 为root 的div。

I can get the example component to show in the browser but I can't create any new components and get them to show without getting the error.我可以让示例组件显示在浏览器中，但我无法创建任何新组件并让它们显示而不会出现错误。 I've even tried just renaming the example-component and even that won't work.我什至尝试重命名示例组件，即使这样也行不通。 I renamed the file to App.vue, and then renamed everthing else - see below:我将文件重命名为 App.vue，然后重命名了其他所有内容 - 见下文：

app.js应用程序.js


require('./bootstrap');

window.Vue = require('vue');

Vue.component('app', require('./components/App.vue').default);

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

welcome.blade.php Welcome.blade.php

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
  <head>
      <meta charset="utf-8">
      <meta name="csrf-token" content="{{csrf_token()}}">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="stylesheet" href="/css/app.css">
      <!-- Bootstrap-->
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
      <title>Journey To Dev</title>
  </head>

  <body>
    <div id="app">
      <app></app>
    </div>

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

</html>

The App.vue is unchanged from ExampleComponent.vue, i just renamed the file: App.vue 与 ExampleComponent.vue 没有变化，我只是重命名了文件：

<template>
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-8">
                <div class="card">
                    <div class="card-header">Example Component</div>

                    <div class="card-body">
                        I'm an example component.
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        mounted() {
            console.log('Component mounted.')
        },
    }
</script>

Thanks!谢谢！

Answer 1

You need to run你需要跑

npm run dev

Again everytime you change Javascript assets or Vue components so that Webpack recompile them to public/js/app.js每次您更改 Javascript 资产或 Vue 组件时再次再次，以便 Webpack 将它们重新编译为public/js/app.js

Or even better, boot up a watcher and let it recompile when you change code或者更好的是，启动一个观察器并在你更改代码时让它重新编译

npm run watch

And make sure to hard refresh or leave the devtools console open so cache would be disabled并确保硬刷新或让开发工具控制台保持打开状态，以便禁用缓存

You can also automatically register components like so您还可以像这样自动注册组件

const files = require.context('./', true, /\.vue$/i)
files.keys().map(key => Vue.component(key.split('/').pop().split('.')[0], files(key).default))

instead of代替

Vue.component('app', require('./components/App.vue').default);

Hope this helps希望这可以帮助

[Vue 警告]：未知的自定义元素：<app> - 您是否正确注册了组件？（在发现<root> )</root></app>

问题描述

1 个解决方案

解决方案1
2 已采纳 2019-10-09 16:54:36

[Vue 警告]：未知的自定义元素：<app> - 您是否正确注册了组件？ （在发现<root> )</root></app>

问题描述

1 个解决方案

解决方案1 2 已采纳 2019-10-09 16:54:36

[Vue 警告]：未知的自定义元素：<app> - 您是否正确注册了组件？（在发现<root> )</root></app>

解决方案1
2 已采纳 2019-10-09 16:54:36