ExampleComponent.vue 不工作 Laravel 7

Question

我尝试了很多方法从 Whosebug、laracast 解决这个问题，google 但没有任何效果，

-> 我认为我的 vue.js 没有加载或工作（我使用的是 sublime 文本，所有显示 突出显示或彩色文本的文件除了 ExampleCmponent.vue file), npm 运行 watch 成功但 vue devtools 也没有检测到任何 vue.

-> 我也试过：

<div id="app">
     <example-component></example-component>
 </div>

我正在与您分享屏幕截图，请尽可能帮助我： ExampleComponent.vue

home.blade：我也试过没有#id标签->

chrome:vue devtools:

这里是app.js:

我试过了：

https://laracasts.com/discuss/channels/vue/example-component-not-working

https://laravel.com/docs/7.x/frontend

Answer 1

你在这里所做的被称为Fronend-Scaffolding. You still need to Compile Assets。

打开你的 webpack.mix.js 并添加你的 .js & .scss 个文件。完成后，确认文件位于 public /js /css 文件夹中。

mix.js('resources/js/app.js', 'public/js')
    .sass('resources/sass/app.scss', 'public/css');

然后，在 blade.

中添加以下行

// use mix() for cache bursting. Or simply stick with asset()
<link href="{{ mix('css/app.css') }}" rel="stylesheet">
<script src="{{ mix('js/app.js') }}"></script>

ExampleComponent.vue 不工作 Laravel 7

ExampleComponent.vue is not working Laravel 7

laravel

vue.js

laravel-7