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

1、简介

Laravel并不强制你使用什么JavaScript或者CSS预处理器,不过也确实提供了对很多应用都很有用的BootstrapVue的一些基本使用。默认情况下,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文件引入了一些扩展包,比如vuevue-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')
    <example></example>
@endsection

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

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

学院君

学院君 has written 554 articles

资深PHP工程师,Laravel学院院长