商品列表乱掉了？

npm 和 yarn 只需要有一个在运行就可以了，两个同时运行反倒可能出问题。

另外就是自己仔细检查是否有遗漏的代码。

@leo 检查了 index.blade.php html 代码与 app.sass css 代码，对比 html class 名与 css .className ，发现 index.blade.php 没有 products-index-page 这个 class 而 sass 用了这个 class? 我把它改成了panel-body，看了下教程代码确实没有 products-index-page 这个 class

@FreeMason 前面的基础布局没有按教程做

@leo @FreeMason
我也碰到这个问题了。仔细检查了一下之前的步骤并未在index.blade.php页面内发现有products-index-page这个class。
解决办法1：在app.scss文件里把.products-index-page{}这个大class去掉
解决办法2：在index.blade.php文件里

<div class="row">

改成

<div class="row products-index-page">

请问下这个class是否是在这个位置的呢

@westwoods

resources/views/layouts/app.blade.php

    <div id="app" class="{{ route_class() }}-page">

自己看是不是这里漏了

@leo
谢谢。这里我写了。Goole Chrome inpect 发现是

class="products_index-page"

然后发现是helper.php的问题。

各位大佬,小弟发现问题在于路由:Route::get('products', 'ProductsController@index')->name('Products.index');
"P"应该是小写"p"

@leo :+1: :+1:正解！如果laravel版本不对，按照教程可能有点出入，如果完全按照教程是没问题的作者Nice啊

完全按照教程来还不行的话

mix中添加version（）或者手动disable cache

我也遇到同样的问题，看了上面评论明白怎么回事，我来解释一下： 因为按教程我们在resources/views/layouts/app.blade.php中加入

 <div id="app" class="{{ route_class() }}-page">

在显示的时候它是显示成：

<div id="app" class="product-index-page">

教程的样式里却写成

.products-index-page{...}

看出问题了，多了一个s 这是的显示是路由名的字符，所以在取路由名的时候要按教程

Route::redirect('/', '/products')->name('root');
Route::get('products', 'ProductsController@index')->name('products.index');

name里面的字符不要少，也不要自己改变，它不是前面的那个products.是后面的。