简介

虽然 Laravel 不决定你使用哪种 JavaScrit 或 CSS 预处理器，但它却使用 BootStrap 和 Vue 提供了一个基本的起始点，它们对于大多数的应用都会有用。默认情况下，Laravel 使用 NPM 来安装这两个前端包。

CSS

Laravel Elixir 为编译 SASS 或 LESS （它们都是原生 CSS 的扩展，可以添加变量、混合语法、及其他强大的功能，使得处理 CSS 更加有趣）提供了一个简介、丰富的 API。

在这个文档中，我们会简要讨论下一般 CSS 的编译方式，然后，你需要查看完整的 Laravel Elixir 文档来了解编译 SASS 或 LESS 的更多内容。

JavaScript

Laravel 并不要求你使用指定的 JavaScript 框架或库来创建你的应用。事实上，你并不是必须使用 JavaScript。然而，Laravel 确实提供了一种基本的脚手架，通过使用 Vue 库来使得编写现代化的 JavaScript 更加简单。Vue 提供了丰富的 API 使用组件来创建强大的 JavaScript 应用。

编写 CSS

Laravel 的 package.json 文件包含了 bootstrap-sass 包来帮助你使用 BootStrap 来构建应用的前端原型。然后，你可以根据自己应用的需求随意从 package.json 文件删除或添加包。你不是必须使用 BootStrap 框架来构建 Laravel 应用 – 它只是为那些选择使用它的人提供了一个好的起始点。

在编译 CSS 前，使用 NPM 来安装项目的前端依赖：

npm install

当使用 npm install 安装前端依赖后，你可以通过 Gulp 把 SASS 文件编译为原生 CSS。gulp 命令会处理 gulpfile.js 文件中的指令。通常来说，编译后的 CSS 会被放置到 public/css 目录：

gulp

默认的 gulpfile.js 文件包含了 Laravel 将要编译的 resources/assets/sass/app.scss SASS 文件，app.scss 会引入一个 SASS 变量的文件并加载 BootStrap，这对于大多数应用提供了一个好的起始点。你可以根据自己的喜好自由的定制 app.scss 文件，甚至可以通过配置 Laravel Elixir 来使用一个完全不同的预处理器。

编写 JavaScript

框架要求的所有 JavaScript 依赖你都可以在项目根目录下的 package.json 文件中找到。这个文件同 composer.json 文件很相似，除了它是指定 JavaScript 依赖而非 PHP 依赖。你可以使用 Node Package Manager(NPM) 来安装这些依赖：

npm install

默认的 package.json 文件包含了一些包，如 vue 和 vue-resource 帮助你开始构建 JavaScript 应用。你可以根据应用的需要自由的从 package.json 文件删除或添加依赖。

一旦包安装完成，你就可以使用 gulp 命令来编译你的资源。Gulp 是一个 JavaScript 的命令行构建系统。当你运行 gulp 命令时，Gulp 将会执行 gulpfile.js 文件中的指令。

gulp

默认情况下，gulpfile.js 文件编译你的 SASS 和 resources/assets/js/app.js 文件，你可以在 app.js 文件中注册 Vue 组件，或者，如果你喜欢一个不同的框架，你可以配置自己的 JavaScript 应用。编译后的 JavaScript 一般放在 public/js 文件夹中。

编写 Vue 组件

默认情况下，全新安装的 Laravel 会包含一个放置在 resources/assets/js/components 目录下的 Example.vue Vue 组件。这个 Example.vue 是一个单文件 Vue 组件，它在同一个文件中定义 JavaScript 和 HTML 模板。单文件组件提供了一种方便的方式来构建 JavaScript 驱动的应用。示例组件已经在 app.js 中注册：

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

要在应用中使用该组件，只需把它添加到你的 HTML 模板。例如，在允许 make:auth Artisan 命令后，生成应用的用户认证你注册视图文件后，你可以把该组件添加到 home.blade.php Blade 模板中：

@extends('layouts.app')

@section('content')
    <example></example>
@endsection

当然，如果你有兴趣了解 Vue 组件的更多内容，你需要阅读 Vue 文档，它提供了一个 Vue 框架的全面、易读的概述。