[ Laravel 5.3 文档 ] JavaScript & CSS —— 起步

1、简介

Laravel并不强制你使用什么JavaScript或者CSS预处理器，不过也确实提供了对很多应用都很有用的 Bootstrap 和 Vue 的一些基本使用。默认情况下，Laravel使用 NPM 来安装这些前端包。

CSS

LaravelElixir提供了干净的、优雅的API用于编译SAAS或Less，SAAS和Less都是在原生CSS的基础上新增了变量、混合（MixIn）以及其它强大的功能特性，从而让我们在使用CSS的时候更加享受。

在本文档中，我们会简要讨论CSS的编译，不过，你最好参考完整的Laravel Elixir文档了解更多SAAS或Less的编译细节。

JavaScript

Laravel并不强制你使用指定的JavaScript框架或库来构建应用，事实上，你也可以完全不使用JavaScript，不过，Laravel还是引入了一些基本的脚手架：使用Vue库让我们更轻松地编写现代JavaScript。Vue提供了优雅的API让我们可以通过组件构建强大的JavaScript应用。

2、编写CSS

Laravel应用根目录下的 package.json 文件包含了 bootstrap-sass 扩展包以便我们使用Bootstrap构建前端原型，不过，你也可以按照自己应用的需要来增删 package.json 文件中的扩展包。此外，并不是必须要使用Bootstrap框架来构建Laravel应用——这只是为选择使用Bootstrap的开发者提供一个好的起点。

编译CSS之前，使用NPM安装应用的前端依赖：

npm install

使用 npm install 安装好前端依赖之后，可以使用 Gulp 编译SAAS文件为原生的CSS， gulp 命令会处理 gulpfile.js 文件中的声明。通常，编译好的CSS文件会被放置到 public/css 目录下：

gulp

Laravel自带的默认 gulpfile.js 文件会编译SAAS文件 resources/assets/sass/app.scss ，这个 app.scss 文件将会导入一个包含SAAS变量的文件并加载Bootstrap，从而助力我们快速在应用中引入Bootstrap资源，你也可以按照自己的需要自定义 app.scss 文件，甚至可以通过配置Laravel Elixir使用一个完全不同的预处理器。

3、编写JavaScript

应用所需要的所有JavaScript依赖都可以在应用根目录下的 package.json 中找到，这个文件和 composer.json 类似，只不过它指定的是JavaScript依赖而不是PHP依赖。你可以使用NPM来安装这些依赖：

npm install

默认情况下，Laravel自带的 package.json 文件引入了一些扩展包，比如 vue 和 vue-resource ，以便你快速构建JavaScript应用，同样，你可以按照应用的需要随意增删 package.json 中的扩展包。

扩展包安装好之后，可以使用 gulp 命令来编译前端资源，Gulp是一个JavaScript命令行构建工具，当你执行 gulp 命令的时候，Gulp将会执行 gulpfile.js 中的声明：

gulp

默认情况下，Laravel自带的 gulpfile.js 将会编译SAAS和 resources/assets/js/app.js 文件，在 app.js 文件中你可以注册Vue组件，或者你倾向于其它JavaScript框架，配置你自己的JavaScript应用。你所编译的JavaScript文件通常会存放在 public/js 目录下。

注： app.js 文件会加载 resources/assets/js/bootstrap.js 以便启动和配置Vue，Vue资源，jQuery以及所有其它JavaScript依赖，如果你有额外的JavaScript依赖需要配置，请在这里操作。

编写Vue组件

默认情况下，新安装的Laravel应用将会在 resources/assets/js/components 目录下包含一个Vue组件 Example.vue ，这个Vue组件是一个 单文件Vue组件 示例，其中定义了相关的JavaScript和HTML模板，单文件组件为构建JavaScript驱动的应用提供了便利。这个示例组件在 app.js 中注册：

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

要在应用中使用这个组件，只需要将其丢到某个HTML模板中。例如，在运行完Artisan命令 make:auth 创建登录和注册视图之后，就可以将这个组件丢到Blade模板 home.blade.php 中：

@extends('layouts.app')

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

注：记住，每次修改Vue组件后都要运行一次 gulp 命令，或者，你也可以运行 gulp watch 命令进行监听，一旦组件被修改后可以自动进行重新编译。

如果你对编写Vue组件感兴趣，可以去阅读 Vue文档 ，从而对Vue框架有更加全面的认识。