如何在Laravel5.8 项目如何引入 Bootstrap 框架?

久未见 提交于 2019-11-26 06:18:54

问大家一个问题:Laravel5.8如何引入 Bootstrap?

laravle5.8开发过程中,使用 Bootstrap 来作为应用的前端框架。

Laravel 并不强制你使用 CSS 框架,但是laravel提供了对 Bootstrap 的支持,在 resources/js/bootstrap.js(在 Laravel 5.7 之前的版本位于 resources/assets/js/bootstrap.js)中!

Bootstrap 是以 NPM 扩展包的形式集成到 Laravel 项目中的,NPM 是 Node.js(一个基于 Google V8 引擎的 JavaScript 运行环境)的包管理和分发工具。

运行 npm install 安装 Bootstrap 库

上述 package.json 可类比为前端的 composer.json,我们通过 npm install 安装该文件中定义的依赖,就好比运行 composer install 安装 composer.json 中定义的依赖,只不过一个是安装的是 JavaScript 库,一个是安装的是 PHP 库。

由于新版的nodejs已经集成了npm,所以之前npm也一并安装好了。同样可以通过输入 "npm -v" 来测试是否成功安装。命令如下,出现版本提示表示安装成功

 

你还没有在项目根目录下运行过 npm install 初始化项目依赖的前端资源,现在可以运行它,当然在此之前,需要在你的系统中安装最新版本的 Node.js

Windows 上安装 Node.js

你可以采用以下两种方式来安装。

1、Windows 安装包(.msi)

32 位安装包下载地址 : https://nodejs.org/dist/v4.4.3/node-v4.4.3-x86.msi

64 位安装包下载地址(推荐使用最新版) : https://nodejs.org/dist/v10.16.2/node-v10.16.2-x64.msi

本文实例以 v0.10.26 版本为例,其他版本类似, 安装步骤:

步骤 1 : 双击下载后的安装包 v0.10.26,如下所示:

install-node-msi-version-on-windows-step1

步骤 2 : 点击以上的Run(运行),将出现如下界面:

install-node-msi-version-on-windows-step2

安装完成后,进入dos命令模式

在进入到laravel项目中,执行npm install 

 

安装完成之后,让我们对 Laravel 默认生成的 app.scss 文件进行编辑,删除此文件里的所有内容,只留下面一行,导入 Bootstrap:

resources/sass/app.scss

// Bootstrap
@import '~bootstrap/scss/bootstrap';

 

运行 npm run dev 编译前端资源

将 Bootstrap 导入成功之后, 接下来我们需要使用以下命令来将 .scss 文件编译为 .css 才能正常使用,编译命令如下:npm run dev 

我们就可以运行 npm run dev 命令通过 Laravel Mix 来编译前端资源了,该命令定义在 package.json 中

大多数时候我们需要在 resources/js/app.js 和 resources/sass/app.scss 中编写代码,引入其它模块,然后运行 npm run dev 就可以了,无需任何额外配置。后面我们会专门讲一下 Laravel Mix 的各种使用,现在你只需要知道它是怎么回事就好了。

Laravel Mix 的配置文件就是项目根目录下的 webpack.mix.js

它非常之简洁,从 node_modules 中引入 laravel-mix 库,然后运用它提供的 js 和 sass 方法将 resources/js/app.js 编译打包后输出到 public/js/app.js,将 resources/sass/app.scss (Sass文件)编译打包后输出到 public/css/app.css!

 

这样,我们就可以项目的前端文件下引入 /css/app.css 和 /js/app.js 使用 Bootstrap 提供的样式和 JavaScript 组件了。后面我们将在多个地方基于 Bootstrap 实现前端 CSS 视觉效果优化。

Laravel 在运行时,是以 public 文件夹为根目录的,因此我们可以使用下面这行代码来为 Laravel 引入样式:

<link rel="stylesheet" href="{{ mix('css/app.css') }}">

上面代码将引入 public/css/app.css 样式文件。

标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!