JavaScript & CSS 脚手架

• 介绍
• 编写 CSS
• 编写 JavaScript
  • 编写 Vue 组件
  • 使用 React
• 添加预设

介绍

虽然 Laravel 不规定您使用哪种 JavaScript 或 CSS 预处理器，但它确实提供了一个基本的起点，使用 Bootstrap、React 和 / 或 Vue，这对许多应用程序将是有帮助的。默认情况下，Laravel 使用 NPM 来安装这些前端包。

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

composer require laravel/ui:^2.4

安装 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 更加愉快。在本文档中，我们将简要讨论 CSS 编译的一般情况；然而，您应该查阅完整的 Laravel Mix 文档 以获取有关编译 SASS 或 Less 的更多信息。

JavaScript

Laravel 不要求您使用特定的 JavaScript 框架或库来构建您的应用程序。事实上，您甚至不必使用 JavaScript。然而，Laravel 确实包含了一些基本的脚手架，使得使用 Vue 库编写现代 JavaScript 更加容易。Vue 提供了一个富有表现力的 API，用于使用组件构建强大的 JavaScript 应用程序。与 CSS 一样，我们可以使用 Laravel Mix 轻松地将 JavaScript 组件编译成一个单一的、浏览器就绪的 JavaScript 文件。

编写 CSS

安装 laravel/ui Composer 包并生成前端脚手架后，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 文件，但它指定的是 JavaScript 依赖项而不是 PHP 依赖项。您可以使用 Node 包管理器 (NPM) 安装这些依赖项：

npm install

注意

默认情况下，Laravel 的 package.json 文件包含了一些包，如 lodash 和 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 文件中，您可以注册您的 Vue 组件，或者如果您更喜欢其他框架，可以配置您自己的 JavaScript 应用程序。编译后的 JavaScript 通常会放置在 public/js 目录中。

注意

app.js 文件将加载 resources/js/bootstrap.js 文件，该文件引导和配置 Vue、Axios、jQuery 和所有其他 JavaScript 依赖项。如果您有其他 JavaScript 依赖项需要配置，可以在此文件中进行。

编写 Vue 组件

使用 laravel/ui 包为您的前端生成脚手架时，会在 resources/js/components 目录中放置一个 ExampleComponent.vue Vue 组件。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

注意

请记住，每次更改 Vue 组件时，您都应该运行 npm run dev 命令。或者，您可以运行 npm run watch 命令来监视并在每次修改组件时自动重新编译。

如果您有兴趣了解更多关于编写 Vue 组件的信息，您应该阅读 Vue 文档，它提供了对整个 Vue 框架的全面、易于阅读的概述。

使用 React

如果您更喜欢使用 React 来构建您的 JavaScript 应用程序，Laravel 使得用 React 脚手架替换 Vue 脚手架变得非常简单：

composer require laravel/ui

// 生成基本脚手架...
php artisan ui react

// 生成登录 / 注册脚手架...
php artisan ui react --auth

添加预设

预设是“可宏化的”，这允许您在运行时向 UiCommand 类添加其他方法。例如，以下代码向 UiCommand 类添加了一个 nextjs 方法。通常，您应该在服务提供者中声明预设宏：

use Laravel\Ui\UiCommand;

UiCommand::macro('nextjs', function (UiCommand $command) {
    // 为您的前端生成脚手架...
});

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

php artisan ui nextjs