JavaScript & CSS 脚手架

简介

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

Laravel 提供的 Bootstrap 和 Vue 的脚手架位于 laravel/ui Composer 包中，可以使用 Composer 安装：

composer require laravel/ui --dev

安装完 laravel/ui 包后，你就可以使用 ui Artisan 命令安装前端脚手架：

// 生成基本脚手架...
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

CSS

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

JavaScript

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

编写 CSS

在安装 laravel/ui 编写器包并生成前端脚手架之后，Laravel 的 package.json 文件将包含 bootstrap 包，以帮助你开始使用 bootstrap 对应用程序的前端进行原型设计。但是你可以根据自己应用的需要，在 package.json 文件中，随意添加或删除依赖包。不是一定要使用 Bootstrap 框架来构建您的 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 SASS 文件。app.scss 导入 SASS 变量文件并加载 Bootstrap，它为多数应用提供了一个易用的起点。可以自由的定制 app.scss 文件，以通过配置 Laravel Mix 来使用你所希望的甚至完全不同的预处理器。

编写 JavaScript

应用所依赖的所有 JavaScript 包必须能在项目根目录的 package.json 文件中找到。这个文件与 composer.json 文件类似， composer.json 文件解决 PHP 的依赖关系，package.json 文件则解决 JavaScript 的依赖关系。使用 Node 包管理器 (NPM)安装这些依赖包：:

npm install

Tip：默认情况下， Laravel 的 package.json 文件包含 vue 、 axios 等几个包，以帮助你开始构建 JavaScript 应用。可以根据应用的需要随意添加或删除 package.json 文件中的依赖。

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

npm run dev

默认情况下， Laravel 的 webpack.mix.js 文件编译 SASS 和 resources/js/app.js 文件。你可以在 app.js 文件中注册组件，如果你喜欢利用其它框架配置自己的 JavaScript 应用。编译过的 JavaScript 通常放置在 public/js 目录。

Tip： app.js 文件将载入 resources/js/bootstrap.js 文件，它负责配置和启动 Vue、 Axios、 jQuery 和其它 JavaScript 依赖。如果你想配置额外的 JavaScript 依赖，可以在这个文件内完成。

编写 Vue 组件

当使用 laravel / ui 包给你的前端搭脚手架时，ExampleComponent.vue Vue 组件将会放置在 resources/js/components 目录中。 ExampleComponent.vue 文件是一个单文件 Vue 组件示例，在同一个文件中定义了组件的 JavaScript 和 HTML 。单文件组件提供了构建 JavaScript 驱动应用的简便方法。这个示例组件是在 app.js 文件中注册的：

Vue.component(
    'example-component',
    require('./components/ExampleComponent.vue').default
);

要在应用中使用该组件，需要将其放入 HTML 模板。比如，运行 php artisan ui vue —auth Artisan 命令搭建应用的用户身份验证和注册页面的骨架，只要把这个组件放到home.blade.php Blade 模板中：

@extends('layouts.app')
@section('content')
    <example-component></example-component>
@endsection

Tip: 切记，每次修改了 Vue 组件，都要运行 npm run dev 命令。也可以运行 npm run watch 命令监视和自动重编译发生变化的组件。

如果有进一步学习编写 Vue 组件的兴趣，可以阅读 Vue 文档，它提供了整个 Vue 框架全面、易读的概述。

使用 React

如果更喜欢使用 React 构建 JavaScript 应用， Laravel 使得在 Vue 脚手架和 React 脚手架间切换变得非常容易：

composer require laravel/ui --dev
// 生成基础脚手架…
php artisan ui react
// 生成 登录 / 注册 脚手架...
php artisan ui react --auth

添加预设

预设是『macroable』，它允许你在运行时向 UiCommand 类添加额外的方法。例如，下面的代码将一个 nextjs 方法添加到 UiCommand 类中。通常，您应该在服务提供者中声明预设的宏:

use Laravel\Ui\UiCommand;
UiCommand::macro('nextjs', function (UiCommand $command) {
    // 你的前端手脚架
});

然后，你可以通过 ui 命令调用新的预设:

php artisan ui nextjs

本文章首发在 LearnKu.com 网站上。

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

Laravel China 社区：https://learnku.com/docs/laravel/7.x/frontend/7472