JavaScript & CSS 脚手架

• 简介
• 编写 CSS
• 编写 JavaScript

简介

虽然 Laravel 并不强制你使用哪个 JavaScript or CSS 预处理器，不过它确实提供了适用于许多应用场景的 Tailwind CSS，Inertia 和 Livewire 这将对很多应用程序有帮助。默认情况下，Laravel 使用 NPM 安装这两个前端软件包。

Laravel 提供的 Tailwind CSS 和Livewire/Inertia 脚手架位于 laravel/jetstream Composer 软件包中，可以使用 Composer 安装：

composer require laravel/jetstream

一旦安装了 laravel/jetstream 软件包，您就可以使用 Artisan 命令 jetstream:install 来安装前端脚手架：

// 生成基础脚手架...
php artisan jetstream:install livewire
php artisan jetstream:install inertia

// 生成支持团队的脚手架...
php artisan jetstream:install --teams

技巧：要了解有关 Laravel Jetstream 的更多信息，请查看 Jetstream 的官方文档.

CSS

Laravel Mix 提供了干净的、富有表现力的 API，用于编译 SASS 或 Less，它们能够拓展原始的 CSS，拥有向 CSS 中添加变量、mixins 和其它使 CSS 更好用的强大特性。在这边文档中，我们将简要说明 CSS 的大体编译过程；不过，你最好翻阅完整的 Laravel Mix 文档 以获取编译 SASS 或 Less 的详细信息。

JavaScript

Laravel 不限定你使用 JavaScript 框架或库来构建应用。事实上，你完全可以不使用 JavaScript。但是 Laravel 包括了几个基本的脚手架，它们可以使创建基于 Vue 或者 Inertia 库的现代 JavaScript 变得更容易。Vue 提供了一个极富表现力的 API，使用组件来构建健壮的 JavaScript。像 CSS 一样，可以使用 Laravel Mix 轻松将 JavaScript 组件编译到单个的、基于浏览器的 JavaScript 文件中。

编写 CSS

在安装 laravel/jetstream 扩展包并生成前端脚手架之后，Laravel 的 package.json 文件将包含 bootstrap 包，以帮助你开始使用 bootstrap 对应用程序的前端进行原型设计。但是你可以根据自己应用的需要，在 package.json 文件中，随意添加或删除依赖包。不是一定要使用 Bootstrap 框架来构建您的 Laravel 应用程序，它只是为想使用它的人提供了一个易用的起点。

在安装了 laravel/jetstream Composer软件包并生成前端支架之后，Laravel 的 package.json 文件将包含 Tailwind CSS 软件包，以帮助您开始使用 Tailwind 对应用程序的前端进行原型设计。 不过，您可以根据自己的应用程序的需要，从package.json文件中添加或删除软件包。 您也可以不使用 Tailwind 框架来构建Laravel应用程序-它为选择使用它的人提供了一个很好的起点。

编译 CSS 之前，请使用 Node 包管理器 (NPM)安装项目前端依赖：

npm install

一旦已经使用 npm install 安装了依赖包，就可以使用 Laravel Mix 将 SASS 编译为原生 CSS。npm run dev 命令将处理 webpack.mix.js 文件中的声明。通常编译后的 CSS 放在 public/css 目录中：

npm run dev

Laravel 前端脚手架附带的 webpack.mix.js 文件将编译 resources/sass/app.scss 文件。 这个app.css文件包含了 Tailwind CSS 的正确启动的初始配置。 您可以随意根据需要自定义app.css文件。

编写 JavaScript

当使用 Jetstream Inertia 脚手架时，可以在项目根目录的 package.json 文件中找到应用程序所需的所有 JavaScript 依赖项。 这个文件类似于composer.json 文件，它指定 JavaScript 依赖关系而不是PHP依赖关系。 您可以使用Node package manager (NPM)安装这些依赖项：

npm install

一旦安装了这些包，就可以使用 npm run dev 命令 编译你的资源。Webpack 现代 JavaScript 应用的模块打包器。运行 npm run dev 命令时， Webpack 将执行 webpack.mix.js 文件中的指令：

npm run dev

默认情况下，Laravel 的 webpack.mix.js 文件会编译您的 CSS 和resources/js/app.js 文件。 编译后的JavaScript通常会放在 public/js 目录中。

技巧：app.js 文件将加载resources/js/bootstrap.js文件，该文件将引导并配置您的基本JavaScript依赖项。 如果要配置其他JavaScript依赖项，则可以在此文件中进行配置。

本译文仅用于学习和交流目的，转载请务必注明文章译者、出处、和本文链接
我们的翻译工作遵照 CC 协议，如果我们的工作有侵犯到您的权益，请及时联系我们。