我正在尝试在Laravel 6中设置Vue。
我已经跑了：
撰写者需要laravel / ui
php artisan ui vue
npm install && npm run dev
然后在welcome.blade.php中，我删除了欢迎页面的正文，并添加了一个ID为root的div。
我可以使示例组件在浏览器中显示，但是我无法创建任何新组件并使它们显示而不会出现错误。我什至尝试过仅重命名示例组件，甚至无法正常工作。我将文件重命名为App.vue，然后重命名了其他所有文件-见下文：
app.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>
谢谢！
答案 0 :(得分：2)
您需要运行
npm run dev
每次更改Javascript资产或Vue组件时再次使用，以便Webpack将它们重新编译为public/js/app.js
甚至更好的是，启动观察程序，并在更改代码时对其进行重新编译
npm run watch
并确保进行强制刷新或将devtools控制台保持打开状态，以便禁用缓存
您还可以像这样自动注册组件
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);
希望这会有所帮助