laravel 6.^ 集成 Bootstrap

2020年2月16日 作者 张舫

Laravel 项目中使用 Bootstrap 前端框架,需要先执行以下命令:

composer require 是用来安装扩展包使用的命令,参数 --dev 是指定此扩展包只在开发环境中使用。

上面的命令安装完成后,使用以下命令来引入 Bootstrap :

以上命令做了以下事情:

  1. 在 npm 依赖配置文件 package.json 中引入 bootstrapjquerypopper.js 作为依赖;
  2. 修改 resources/js/bootstrap.js ,在此文件中初始化 Bootstrap UI 框架的 JS 部分;
  3. 修改 resources/sass/app.scss 以加载 Bootstrap 的样式文件;
  4. 新增 resources/sass/_variables.scss 样式配置文件。

运行 Laravel Mix

Laravel Mix 一款前端任务自动化管理工具,使用了工作流的模式对制定好的任务依次执行。Mix 提供了简洁流畅的 API,让你能够为你的 Laravel 应用定义 Webpack 编译任务。Mix 支持许多常见的 CSS 与 JavaScript 预处理器,通过简单的调用,你可以轻松地管理前端资源。

使用 Mix 很简单,首先你需要使用以下命令安装 npm 依赖即可。我们将使用 Yarn 来安装依赖,在这之前,因为国内的网络原因,我们还需为 NPM 和 Yarn 配置安装加速:

使用 Yarn 安装依赖:

安装成功后,运行以下命令即可:

watch-poll 会在你的终端里持续运行,监控 resources 文件夹下的资源文件是否有发生改变。在 watch-poll 命令运行的情况下,一旦资源文件发生变化,Webpack 会自动重新编译。

注意:在后面的课程中,我们需要保证 npm run watch-poll 一直处在执行状态中。

正常运行的界面应类似: