JavaScript & CSS 脚手架#

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

简介#

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

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

composer require laravel/ui:^2.4Copy

安装完 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 --authCopy

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 installCopy

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

npm run devCopy

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 installCopy

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

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

npm run devCopy

默认情况下， 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
);Copy

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

@extends('layouts.app')

@section('content')
    <example-component></example-component>
@endsectionCopy

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 --authCopy

添加预设#

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

use Laravel\Ui\UiCommand;

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

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

php artisan ui nextjsCopy

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

原文地址：https://learnku.com/docs/laravel/7.x/fro...

译文地址：https://learnku.com/docs/laravel/7.x/fro...