本文将详细介绍如何在新建的Laravel项目中引入bootstrap前端框架。

laravel引入bootstrap

首先需要安装laravel/ui编写器包（前提是已经配置好composer）

1

composer require laravel/ui:^3.0 --dev

安装完 laravel/ui 包后，可以使用 ui artisan 命令安装前端脚手架:

1
2
3
4
5
6
7
8
9

// 生成基本脚手架
php artisan ui bootstrap
php artisan ui vue
php artisan ui react

// 生成 登录/注册 脚手架...
php artisan ui bootstrap --auth
php artisan ui vue --auth
php artisan ui react --auth

这里我们要安装的是bootstrap脚手架：

1

php artisan ui bootstrap

脚手架安装好以后，会在laravel框架相关配置文件中写入一些配置：

在 resources/js/bootstrap.js中，我们可以看到对 bootstrap 的js库的引入：

1
2
3
4
5
6

try {
    window.Popper = require('popper.js').default;
    window.$ = window.jQuery = require('jquery');

    require('bootstrap');
} catch (e) {}

然后在 resources/js/app.js 中又引入了这个 bootstrap.js 文件：

1

require('./bootstrap');

这样我们在编译前端资源的时候就会将 bootstrap相关js文件加载进来。对于 Bootstrap 所需 CSS 文件，会在 resources/sass/app.scss 中引入：

1

@import '~bootstrap/scss/bootstrap';

执行npm命令安装各种依赖包（bootstrap依赖JQuery，执行前确认下package.json中是否已经包含）：

1

npm install

该命令会下载 node_modules 文件夹，里面就包括了 bootstrap、JQuery等等package.json中的依赖包。

一旦已经使用 npm install 安装了依赖包，就可以运行 npm run dev 命令：

1

npm run dev

该命令通过 Laravel Mix（Laravel Mix 是对 Webpack 进行封装后提供给 Laravel 项目使用的前端打包工具）来编译前端资源了（ 可以将 SASS 编译为原生 CSS等）。该命令定义在 package.json 中：

1
2
3
4
5

"scripts": {
        "dev": "npm run development",
        "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
        ...
        },

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

1
2
3
4

const mix = require('laravel-mix');

mix.js('resources/js/app.js', 'public/js')
   .sass('resources/sass/app.scss', 'public/css');

从 node_modules 中引入 laravel-mix 库，然后运用它提供的 js 和 sass 方法将 resources/js/app.js 编译打包后输出到 public/js/app.js，将 resources/sass/app.scss （Sass文件）编译打包后输出到 public/css/app.css：

1
2
3
4
5
6
7
8


 DONE  Compiled successfully in 12807ms                                                                                                                                                                                     下午12:19:25

       Asset      Size   Chunks             Chunk Names
/css/app.css   178 KiB  /js/app  [emitted]  /js/app
  /js/app.js  1.08 MiB  /js/app  [emitted]  /js/app

C:\Users\zhang\Documents\MyDOC\WorkSource\PHP\phpStudy>

这样，我们就可以项目的前端文件下引入 /css/app.css 和 /js/app.js 使用 Bootstrap 提供的样式和 JavaScript 组件了：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Laravel</title>
        <link rel="stylesheet" href="css/app.css">
    </head>
    <body>
 
        <script src="js/app.js"></script>
    </body>
</html>

最后补充：

实时监听 sass 文件和 js 源文件的修改，使用以下命令：

1

npm run watch-poll

解决浏览器缓存问题:

打开 webpack.min.js 文件，在.sass() 方法后添加.version() 方法

1
2

mix.js('resources/js/app.js', 'public/js')
    .sass('resources/sass/app.scss', 'public/css').version();

（全文完）