分享每一天-laravel 安装 bootstrap4.x

laravel 安装 bootstrap4.x

PHP 1681 0 创建时间：2020-09-28 10:37:33

##### 1. laravel基本

######    安装最新的 Bootstrap#

```php
	composer require laravel/ui:^3.0 --dev
	```
	
###### 	引入 Bootstrap
	```php
	php artisan ui bootstrap
	```

##### 2. npm install 安装 node_modules 依赖和库

##### 3. 运行 npm run dev 编译前端资源

##### 4. laravel-mix

Laravel Mix 是对 Webpack 进行封装后提供给 Laravel 项目使用的前端打包工具，Webpack 是目前最新的、广泛使用的前端资源打包工具（之前还有 Grunt、Gulp 等），能够以模块方式处理所有前端资源，Laravel Mix 对其提供的功能进行了封装从而避免后端开发人员大量编写 Webpack 配置命令，大多数时候我们需要在 resources/js/app.js 和 resources/sass/app.scss 中编写代码，引入其它模块，然后运行 npm run dev 就可以了，无需任何额外配置。后面我们会专门讲一下 Laravel Mix 的各种使用，现在你只需要知道它是怎么回事就好了。

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

```javascript
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：
![](http://www.seedblog.cn/uploads/article/2020-09-28/lAmeYQKB6IRqytWImNLOELI96V29SoAfanZMHyxl.png)

##### 5.最后优化，解决浏览器缓存问题

打开 webpack.min.js 文件，在.sass() 方法后添加.version() 方法
```php
mix.js('resources/js/app.js', 'public/js')
    .sass('resources/sass/app.scss', 'public/css').version();//here
```
##### 生成编译文件
```php
npm run dev
```
执行以上命令后，会自动生成编译好的 js 和 css 文件到 public 目录
如果你想实时监听 scss 文件和 js 源文件的修改，使用以下命令：
```php
npm run watch-poll
```

laravel 安装 bootstrap4.x

商品推荐

广告推荐

推荐文章