laravel 安装 bootstrap4.x

 

 

 

 

1. 项目基本配置

需要在你的系统中安装最新版本的 Node.js。

 

如果你使用的开发环境是 Homestead 的话，那么系统已经为你安装好了，去 Homestead 中执行即可；

 

如果你使用的是 Laradock 的话，需要在 laradock/.env 中设置 WORKSPACE_INSTALL_NODE 选项为 true：

WORKSPACE_INSTALL_NODE=true

然后重新构建 workspace 容器，具体可参考Laradock文档。如果你是在 Windows 或 Mac 原生环境下使用 npm 命令，需要去官网选择对应系统的最新版本安装，安装完 Node 后，npm 也会随之安装，不必再单独安装。

 

 

2. npm install 安装 node_modules 依赖和库

 

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

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

该命令最终运行的是 npm run development 命令，意为在开发环境对前端资源进行编译，

如果需要的话你可以在这里对命令参数进行修改，如果是在生产环境，需要运行 npm run prod 命令，

如果在开发环境中想要修改文件后自动编译资源可以运行 npm run watch 命令。

 

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：

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：

 

 

 

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

 

 

 

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：

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

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

总结:

1. resource/js/ bootstrap.js 中引用 bootstrap 和 vue 库

2. 在 app.js 中 导入库

3. sass/ app.scss 中引入 bootstrap

 

启动项目： 

1. npm install 安装 依赖

2. 运行前端项目

　　npm run dev

　　npm run prod

　　npm run watch

　　(Laravel Mix 提供开箱即用的webpack配置 )