[英]Laravel, VueJS [Vue warn]: Unknown custom element: did you register the component correctly?
[英][Vue warn]: Unknown custom element: <app> - did you register the component correctly? (found in <Root>)
我正在尝试在 Laravel 6 中设置 Vue。
我跑过:
作曲家需要 laravel/ui
php 工匠 ui vue
npm 安装 && npm 运行开发
然后在welcome.blade.php 中,我删除了欢迎页面的正文并添加了一个ID 为root 的div。
我可以让示例组件显示在浏览器中,但我无法创建任何新组件并让它们显示而不会出现错误。 我什至尝试重命名示例组件,即使这样也行不通。 我将文件重命名为 App.vue,然后重命名了其他所有内容 - 见下文:
应用程序.js
require('./bootstrap');
window.Vue = require('vue');
Vue.component('app', require('./components/App.vue').default);
const app = new Vue({
el: '#app',
});
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>
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>
谢谢!
你需要跑
npm run dev
每次您更改 Javascript 资产或 Vue 组件时再次再次,以便 Webpack 将它们重新编译为public/js/app.js
或者更好的是,启动一个观察器并在你更改代码时让它重新编译
npm run watch
并确保硬刷新或让开发工具控制台保持打开状态,以便禁用缓存
您还可以像这样自动注册组件
const files = require.context('./', true, /\.vue$/i)
files.keys().map(key => Vue.component(key.split('/').pop().split('.')[0], files(key).default))
代替
Vue.component('app', require('./components/App.vue').default);
希望这可以帮助
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.