您现在的位置是:自如初>LaravelLaravel

Laravel7使用前端脚手架

温新 2020-06-01 01:06:13 Laravel 3575人已围观

简介Laravel7使用前端脚手架。Laravel7,你会发现package.json文件中已经没有了bootstrap,这就不能直接安装了,直接安装将会用到bootstratp框架样式。在此之前,Laravel提供了开箱即可使用的bootstrap。Laravel7中,将bootstartp与vue集中到larave/ui中,这一点文档中说的很清楚了

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>


我是夕阳何处寻,期待和优秀的你一起同行!


  夕阳何处寻

  2020年06月01日

很赞哦!(48)

文章评论

登录 注册

自如初--时间轴

QQ登录

站名:自如初

独白:向前走!向前走!

邮箱:xyhcx@foxmail.com

站点信息