![](/img/trans.png)
[英]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.