起步

1、简介

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

CSS

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

在本文档中，我们会简要讨论CSS的编译，不过，你最好参考完整的Laravel Elixir文档了解更多SASS或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编译SASS文件为原生的CSS，gulp命令会处理gulpfile.js文件中的声明。通常，编译好的CSS文件会被放置到public/css目录下：

gulp

Laravel自带的默认gulpfile.js文件会编译SASS文件resources/assets/sass/app.scss，这个app.scss文件将会导入一个包含SASS变量的文件并加载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将会编译SASS和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')
    
@endsection

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