Laravel7使用前端脚手架

Laravel使用前端脚手架的问题困扰了我许久，这也导致了我一直没有静下心来想问题。这个问题解决后也没有记录下来，为此，现在记录一下，巩固自己，帮助向我一样被困扰的大家。

遇到问题，首先想的是百度或者谷歌，当我最开始遇到这个问题时，自己没有解决，那就百度吧。百度之后就会发现，网上的方法都已经过时了，至少在我需要使用的Laravel6、7版本中已经不可行了。没有解决，这是一个过不去的梗。 学习一个框架，最好的方法就是查看官方文档，这一点也没有错。百度没有解决掉的问题，我在官方文档中得到了答案。下将是我重新整理对比框架的方法记录。

Laravel7，你会发现package.json文件中已经没有了bootstrap，这就不能直接安装了，直接安装将会用到bootstratp框架样式。在此之前，Laravel提供了开箱即可使用的bootstrap。Laravel7中，将bootstartp与vue集中到larave/ui中，这一点文档中说的很清楚了，安装laravel/ui之后并生成需要的bootstart后，packge.json才会看到相关的bootstart与vue

第一步、安装bootstrap与vue

composer require laravel/ui

注：Laravel6版本只使用laravel/ui 2以下的版本

第二步、生成bootstrap与vue

php artisan ui bootstrap
php artisan ui vue

第三步、安装

npm install

// 安装完成后，出现出现一些警告，忽略掉，继续执行下一步走

第四步、运行6/1/2020 12:37:45 AM

npm run dev

第五步、模板中引入css与js

// app/resources/index.blade.php

<link rel="stylesheet" href="/css/app.css">
<script src="/js/app.js"></script>

// js根据自己的需要引入

到这里就已经完成了，可以直接在模板中使用bootstrap样式了。 但是问题却没有完？什么问题了？除了使用bootstrap样式外，我们还要编写自己的样式或者js代码， 那么，就会发现问题来了，自己在scss中编写的样式没有生效，这是怎么回事？这就是没有编译的问题，如果你遇到了，请往继续往下看。

第六步、开启监听，实时监控是否变化

npm run watch

// 这样即可解决样式没有生效的问题

第七步、模板引入样式

<link rel="stylesheet" href="/css/app.css">
<script src="/js/app.js"></script>

{{--bootstrap样式--}}
<button class="btn btn-success">成功</button>