前端工具 Bootstrap、NPM和Yarn

Bootstrap

项目使用 Bootstrap 来作为演示应用的前端框架。Bootstrap 是由 Twitter 的两位工程师 Mark Otto 和 Jacob Thornton 在 2011 年开源的一个 Web 前端框架。 Bootstrap 的 官方文档。

Laravel 项目默认集成了 Bootstrap 前端框架，但还是需要做一定配置之后才能够正常使用。

Bootstrap 是以 NPM 扩展包的形式集成到 Laravel 项目中的。

NPM

NPM 是 Node.js（一个基于 Google V8 引擎的 JavaScript 运行环境）的包管理和分发工具。参考阅读：npm 是干什么的？（非教程）

Composer 的一些概念也是从 NPM 中借鉴过来的，因此 NPM 也有个类似 composer.json 文的 package.json 文件，Laravel 默认会为每个新建的项目自动生成该文件，并会在文件里面默认集成一些较为常用的扩展包。

Laravel 默认集成了一些 NPM 扩展包，重点有以下几个：

• bootstrap-sass —— Bootstrap NPM 扩展包；
• jquery —— jQuery NPM 扩展包；
• laravel-mix —— 由 Laravel 官方提供的静态资源管理工具；
• vue —— VUE.js 前端框架；

这些扩展包，为 Laravel 提供了一套完整的前端工作流。

Yarn

我们可以使用 NPM 对这些扩展包进行安装，但由于 NPM 的安装速度，安全性和稳定性等都饱受开发者的诟病，因此我们在改用 Facebook 在 2016 年的 10 月份开源的 Yarn 来作为 NPM 的替代品。

使用 Yarn 对扩展包进行安装，请在项目根目录下运行以下命令：

$ yarn install --no-bin-links

在提供的定制化 Homestead 安装包中，已默认为集成了 Yarn，因此不必再进行重复安装 Yarn，若你想了解具体的安装方式，可查阅 Yarn 官方安装文档。

导入 Bootstrap

对 Laravel 默认生成的 app.scss 文件进行编辑，删除此文件里的所有内容，只留下面一行，导入 Bootstrap：

resources/assets/sass/app.scss

// Bootstrap
@import "node_modules/bootstrap-sass/assets/stylesheets/bootstrap";

.scss 是 Sass（一种 CSS 开发工具）专属的文件格式。