JavaScript & CSS 脚手架

简介
编写 CSS
编写 JavaScript
- 编写 Vue 组件
- 使用 React

简介

虽然 Laravel 并不强制你使用哪个 JavaScript 或 CSS 预处理器，不过它提供了使用适用于许多应用场景的 Bootstrap 和 Vue 的起点。默认情况下， Laravel 使用 NPM 安装这两个前端包。

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 文件中。

删除前端脚手架

想要从应用中删除前端脚手架，可以使用 preset Artisan 命令。执行带有 none 选项的 preset 命令，将从应用中删除 Bootstrap 和 Vue 脚手架，只保留空的 SASS 文件和几个常用的 JavaScript 工具库：

php artisan preset none

编写 CSS

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 应用包含 ExampleComponent.vue Vue组件，存放在 resources/js/components 目录中。 ExampleComponent.vue 文件是一个单文件 Vue 组件示例，在同一个文件中定义了组件的 JavaScript 和 HTML 。单文件组件提供了构建 JavaScript 驱动应用的简便方法。这个示例组件是在 app.js 文件中注册的：

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

要在应用中使用该组件，需要将其放入 HTML 模板。比如，运行 make: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 脚手架间切换变得非常容易。在纯净的 Laravel 应用中，可以使用带有 react 参数的 preset 命令来达到此目的：

php artisan preset react

此命令将删除 Vue 脚手架，并使用 React 脚手架代替它，同样包含一个组件示例。

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

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

前端指南