laravel 6.^ 集成 Bootstrap
2020年2月16日Laravel 项目中使用 Bootstrap 前端框架,需要先执行以下命令:
1 |
$ composer require laravel/ui --dev |
composer require
是用来安装扩展包使用的命令,参数 --dev
是指定此扩展包只在开发环境中使用。
上面的命令安装完成后,使用以下命令来引入 Bootstrap :
1 |
$ php artisan ui bootstrap |
以上命令做了以下事情:
- 在 npm 依赖配置文件
package.json
中引入bootstrap
、jquery
、popper.js
作为依赖; - 修改
resources/js/bootstrap.js
,在此文件中初始化 Bootstrap UI 框架的 JS 部分; - 修改
resources/sass/app.scss
以加载 Bootstrap 的样式文件; - 新增
resources/sass/_variables.scss
样式配置文件。
运行 Laravel Mix
Laravel Mix 一款前端任务自动化管理工具,使用了工作流的模式对制定好的任务依次执行。Mix 提供了简洁流畅的 API,让你能够为你的 Laravel 应用定义 Webpack 编译任务。Mix 支持许多常见的 CSS 与 JavaScript 预处理器,通过简单的调用,你可以轻松地管理前端资源。
使用 Mix 很简单,首先你需要使用以下命令安装 npm 依赖即可。我们将使用 Yarn 来安装依赖,在这之前,因为国内的网络原因,我们还需为 NPM 和 Yarn 配置安装加速:
1 2 |
$ npm config set registry=https://registry.npm.taobao.org $ yarn config set registry https://registry.npm.taobao.org |
使用 Yarn 安装依赖:
1 |
$ yarn install |
安装成功后,运行以下命令即可:
1 |
$ npm run watch-poll |
watch-poll
会在你的终端里持续运行,监控 resources
文件夹下的资源文件是否有发生改变。在 watch-poll
命令运行的情况下,一旦资源文件发生变化,Webpack 会自动重新编译。
注意:在后面的课程中,我们需要保证
npm run watch-poll
一直处在执行状态中。
正常运行的界面应类似: