[ Laravel 6.0 文档 ] 前端开发 —— 快速入门:JavaScript & CSS 脚手架

简介

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

Laravel 提供的 Bootstrap 和 Vue 脚手架代码位于 laravel/ui 依赖包中,需要通过 Composer 下载安装:

composer require laravel/ui --dev

laravel/ui 包安装完成后,可以使用 Artisan 命令 ui 来初始化前端脚手架:

// Generate basic scaffolding...
php artisan ui vue
php artisan ui react

// Generate login / registration scaffolding...
php artisan ui vue --auth
php artisan ui react --auth

CSS

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

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

JavaScript

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

编写 CSS

安装完 laravel/ui Composer 依赖包并生成前端脚手架代码之后,Laravel 应用根目录下的 package.json 文件将会包含 bootstrap 扩展包以便我们使用 Bootstrap 构建前端原型,不过,你也可以按照自己应用的需要来增删 package.json 文件中的扩展包。此外,并不是必须要使用 Bootstrap 框架来构建 Laravel 应用 —— 这只是为选择使用 Bootstrap 的开发者提供一个良好的起点。

编译 CSS 之前,使用 NPM 安装应用的前端依赖(在此之前确保系统已经安装过 Node.js):

npm install

使用 npm install 安装好前端依赖之后,可以使用 Laravel Mix 将 SASS 文件编译为纯 CSS,npm run dev 命令会处理 webpack.mix.js 文件中的声明。通常,编译好的 CSS 文件会存放到 public/css 目录下:

npm run dev

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

编写 JavaScript

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

npm install

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

扩展包安装好之后,可以使用 npm run dev 命令来编译前端资源,Webpack 是为现代 JavaScript 应用提供的模块捆绑器,当你执行 npm run dev 命令的时候,Webpack 将会执行webpack.mix.js 中的指令:

npm run dev

默认情况下,Laravel 自带的 webpack.mix.js 将会编译 SASS 和 resources/js/app.js 文件,在 app.js 文件中你可以注册 Vue 组件,或者如果你倾向于其它 JavaScript 框架,则可以配置你自己的 JavaScript 应用。编译好的 JavaScript 文件通常会存放到 public/js 目录下。

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

编写 Vue 组件

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

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

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

@extends('layouts.app')

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

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

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

使用 React

如果你更喜欢使用 React 来构建 JavaScript 应用,在 Laravel 中从 Vue 脚手架切换到 React 脚手架也很简单:

composer require laravel/ui --dev

php artisan ui react

// Generate login / registration scaffolding...
php artisan ui react --auth

这个命令将会移除 Vue 脚手架代码并将其替换为 React 脚手架代码,同时包含一个示例组件。

添加预设命令

预设命令是「macroable」的,允许你在运行时添加额外方法到 UiCommand 类,例如,下面这段代码会添加一个 nextjs 方法到 UiCommand 类。通常,你需要在服务提供者中声明预设宏:

use Laravel\Ui\UiCommand;

UiCommand::macro('nextjs', function (UiCommand $command) {
    // Scaffold your frontend...
});

然后,你就可以通过 ui 命令调用新的预设了:

php artisan ui nextjs

相关教程推荐:

学院君 has written 1346 articles

Laravel学院院长,终身学习者

积分:187597 等级:P12 职业:手艺人 城市:杭州

0 条回复

登录后才能进行评论,立即登录?