JavaScript & CSS 脚手架

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

简介

虽然 Laravel 并不强制你使用哪个 JavaScript 或 CSS 预处理器，但还是提供了适合多数应用的 Bootstrap 和 Vue 作为起点。默认情况下， Laravel 使用 NPM 来安装这些前端依赖包。

CSS

Laravel Mix 提供了一个简洁、友好的 API 用于编译 SASS 或 Less 。 SASS 和 Less 扩展了 CSS ，添加了变量、 mixins 等强大特性，使得编写 CSS 更加轻松。这篇文档将简要探讨 CSS 大体的编译过程，不过，你最好还是查阅完整的 Laravel Mix 文档获取更多信息。

JavaScript

Laravel 并不强制使用特定的 JavaScript 框架或库来构建应用。当然，你也可以完全不用 JavaScript 。不过， Laravel 还是提供了一些基本的脚手架，能更容易地使用 Vue 库来编写现代 JavaScript 。 Vue 提供了一个友好的 API ，通过组件就可以构建强大的 JavaScript 应用。和 CSS 一样，用 Laravel Mix 就能轻松把多个 JavaScript 组件编译到单个 JavaScript 文件中。

移除前端脚手架

如果要移除应用的前端脚手架， preset Artisan 会派上用场。这个命令和选项 none 配合使用，会移除应用的 Bootstrap 和 Vue 脚手架，仅保留一个空的 SASS 文件和几个通用的 JavaScript 库：

php artisan preset none

编写 CSS

Laravel 的 package.json 引入了 bootstrap 包， Bootstrap 帮助你构建应用的前端雏形。不过，根据需求， package.json 文件的包可以随意添加或删除。构建 Laravel 应用时， Bootstrap 框架不是必须的，它只是给那些想要使用它的人提供一个好的起点。

编译 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 会编译 SASS 文件 resources/sass/app.scss 。文件 app.scss 会引入一个包含 SASS 变量的文件，并加载 Bootstrap ，这为多数应用提供了一个好的起点。根据需要，文件 app.scss 可随意修改，甚至通过配置 Laravel Mix 使用一个完全不同的预处理器。

编写 JavaScript

项目所有的 JavaScript 依赖都可以在其根目录下的 package.json 文件中找到。这个文件类似于 composer.json ，只是前者指定 JavaScript 依赖，后者指定 PHP 依赖。使用 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 文件中，可以注册 Vue 组件，或使用其他框架进行配置。通常，编译后的 JavaScript 放在 public/js 目录下。

{tip} 文件 app.js 会加载 resources/js/bootstrap.js ，这个文件将引导和配置 Vue, Axios, jQuery 以及其他的 JavaScript 依赖。如果有额外的 JavaScript 依赖需要配置，也可以在这里进行。

编写 Vue 组件

新安装的 Laravel 应用在 resources/js/components 目录默认包含一个 ExampleComponent.vue Vue 组件。 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 协议，如果我们的工作有侵犯到您的权益，请及时联系我们。

前端指南