Laravel 的前端资源处理 JavaScript 和 CSS 构建

简介

Laravel 并没有规定你使用哪个 JavaScript 或 CSS 预处理器,不过默认提供了对大多数应用都很适用的 BootstrapVue 来作为起点。 Laravel 默认使用 NPM 安装这些前端的依赖。

CSS

Laravel Mix 提供了一个简洁、富有表现力的 API 来编译 SASS 或 Less,这些 CSS 预处理语言扩充了 CSS 语言,增加了诸如变量、混合(mixins)及其他一些强大的功能让编写 CSS 代码变得更加有趣。

尽管我们会在这里简要的讨论 CSS 编译的内容,但是,你应该访问 Laravel Mix 文档 获取更多关于编译 SASS 或 Less 的信息。

JavaScript

Laravel 并不需要你使用特定的 JavsScript 框架或者库来构建应用程序。事实上,你也可以完全不用 JavaScript。不过,Laravel 自带了用 Vue 实现的基本脚手架代码来帮你更轻松的开始现代化 JavaScript 编码。Vue 提供了强大的组件化 API 用来构建健壮的 JavaScript 应用程序。

编写 CSS

在 Laravel 的根目录中的 Package.json 文件引入了 bootstrap-sass 依赖包可以帮助你使用 Bootstrap 制作应用程序的前端原型。不过,你可以根据自己应用程序的需要在 package.json 灵活的添加或者移除依赖包。使用 Bootstrap 框架来构建你的 Laravel 应用程序并不是必选项,它只是给那些想用它的人提供一个很好的起点。

编译 CSS 代码之前,需要你先使用 NPM 来安装前端的依赖:

npm install

使用 npm install 成功安装依赖之后,你就可以使用 Laravel Mix 来将 SASS 文件编译为纯 CSS。.npm run dev 命令会执行处理 webpack.mix.js 文件中的指令。通常情况下,编译好的 CSS 代码会被放置在 public/css 目录:

npm run dev

默认情况下,webpack.mix.js 会编译 resources/assets/sass/app.scss SASS 文件。app.scss 文件导入了一个包含 SASS 变量的文件,加载了 Bootstrap 框架,这对大多数程序来说是一个很好的出发点。你也可以根据自己的需要去定制 app.scss 文件的内容,甚至使用完全不同的预处理器,详细配置见 配置 Laravel Mix

编写 JavaScript

在项目根目录中的 package.json 可以找到应用程序的所有 JavaScript 依赖。它和 composer.json 文件类似,不同的是它指定的是 JavaScript 的依赖而不是 PHP 的依赖。使用 Node 包管理器 (NPM) 来安装这些依赖包:

npm install

Laravel package.json 文件默认会包含一些依赖包来帮助你开始建立 JavaScript 应用程序,例如 vueaxios 。你可以根据自己程序的需要在 package.json 中添加或者移除依赖。

成功安装依赖之后,你就可以使用 npm run dev 命令来 编译资源文件 。Webpack 是一个为现代 JavaScript 应用而生的模块构建工具。当你运行 npm run dev 命令时,Webpack 会执行 webpack.mix.js 文件中的指令:

npm run dev

默认情况下,webpack.mix.js 会编译 SASS 文件和 resources/assets/js/app.js 文件。你可以在 app.js 文件中注册你的 Vue 组件,或者如果你更喜欢其他的框架,也可以在这里进行配置。编译好的 JavaScript 文件通常会放置在 public/js 目录。

{tip} app.js 会加载 resources/assets/js/bootstrap.js 文件来启动、 配置 Vue,Vue Resource,jQuery,以及其他的 JavaScript 依赖。如果你有额外的 JavaScript 依赖需要去配置,你也可以在这个文件中完成。

编写 Vue 组件

全新安装的 Laravel 程序默认会在 resources/assets/js/components 中包含一个 Example.vue 的 Vue 组件。Example.vue 文件是一个 单文件 Vue 组件 的示例,单文件 Vue 组件允许我们在同一个文件中编写 JavaScript 和 HTML 模板,它提供了一种非常方便的方式去构建 JavaScript 驱动的应用程序。这个示例组件注册在 app.js 文件。

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

在应用程序中使用示例组件,你只需要简单的将其放到你的 HTML 模板之中。例如,在你运行 make:auth Artisan 命令去生成应用的用户认证和注册的脚手架页面后,你可以把组件放到 homde.blade.php Blade 模板:

@extends('layouts.app')

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

{tip} 谨记,你需要在每次修改 Vue 组件后都需要运行 npm run dev 命令。或者,你可以使用 npm run watch 命令来监控并在每次文件被修改时自动重新编译组件。

当然,如果你对学习更多编写 Vue 组件的内容感兴趣,你可以读一下 Vue 官方引导文档,它提供了一个透彻、易懂的文档让你一览 Vue 框架的概貌。