前端指南
JavaScript & CSS 脚手架#
简介#
虽然 Laravel 并不强制你使用哪个 JavaScript 或 CSS 预处理器,不过它提供了使用适用于许多应用场景的 Bootstrap 和 Vue 的起点。默认情况下, Laravel 使用 NPM 安装这两个前端包。
CSS#
Laravel Mix 提供了干净的、富有表现力的 API,用于编译 SASS 和 Less,它们能够拓展原始的 CSS,拥有向 CSS 中添加变量、mixins 和其它使 CSS 更好用的强大特性。在这篇文档中,我们将简要说明 CSS 的大体编译过程;不过,你最好翻阅完整的 Laravel Mix 文档 以获取编译 SASS 和 Less 的详细信息。
JavaScript#
Laravel 不要求你使用特定的 JavaScript 框架或库来构建应用。事实上,你完全可以不使用 JavaScript。但是 Laravel 包括了几个基本的脚手架,它们可以使创建基于 Vue 库的现代 JavaScript 变得更容易。Vue 提供了一个极富表现力的 API,使用组件来构建健壮的 JavaScript。像 CSS 一样,可以使用 Laravel Mix 轻松将 JavaScript 组件编译到单个的、基于浏览器的 JavaScript 文件中。
删除前端脚手架#
想要从应用中删除前端脚手架,可以使用 preset
Artisan 命令。执行带有 none
选项的 preset
命令,将从应用中删除 Bootstrap 和 Vue 脚手架,只保留空的 SASS 文件和几个常用的 JavaScript 工具库:
php artisan preset none
编写 CSS#
Laravel 的 package.json
文件包含 bootstrap
包,帮助你使用 Bootstrap 开始初始化应用的前端。但是你可以根据你自己应用的需要在 package.json
中添加或删除依赖包。不是一定要使用 Bootstrap 框架构建 Laravel 应用,它只是为想使用它的人提供了一个易用的起点。
编译 CSS 之前,请使用 Node 包管理器 (NPM) 安装项目前端依赖:
npm install
一旦已经使用 npm install
安装了依赖包,就可以使用 Laravel Mix 将 SASS 编译为原生 CSS。. npm run dev
命令将处理 webpack.mix.js
文件中的声明。通常编译后的 CSS 放在 public/css
目录中:
npm run dev
Laravel 默认自带的 webpack.mix.js
文件将编译 resources/sass/app.scss
SASS 文件。 app.scss
导入 SASS 变量文件并加载 Bootstrap,它为多数应用提供了一个易用的起点。 可以自由的定制 app.scss
文件,以通过 配置 Laravel Mix 来使用你所希望的甚至完全不同的预处理器。
编写 JavaScript#
应用所依赖的所有 JavaScript 包必须能在项目根目录的 package.json
文件中找到。这个文件与 composer.json
文件类似, composer.json
文件解决 PHP 的依赖关系,package.json
文件则解决 JavaScript 的依赖关系。使用 Node 包管理器 (NPM) 安装这些依赖包:
npm install
Tip:默认情况下, Laravel 的
package.json
文件包含vue
、axios
等几个包,以帮助你开始构建 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
文件中注册组件,如果你喜欢利用其它框架配置自己的 JavaScript 应用。编译过的 JavaScript 通常放置在 public/js
目录。
Tip:
app.js
文件将载入resources/js/bootstrap.js
文件,它负责配置和启动 Vue、 Axios、 jQuery 和其它 JavaScript 依赖。如果你想配置额外的 JavaScript 依赖,可以在这个文件内完成。
编写 Vue 组件#
默认情况下,纯净的 Laravel 应用包含 ExampleComponent.vue
Vue 组件,存放在 resources/js/components
目录中。 ExampleComponent.vue
文件是一个 单文件 Vue 组件 示例,在同一个文件中定义了组件的 JavaScript 和 HTML 。单文件组件提供了构建 JavaScript 驱动应用的简便方法。这个示例组件是在 app.js
文件中注册的:
Vue.component(
'example-component',
require('./components/ExampleComponent.vue')
);
要在应用中使用该组件,需要将其放入 HTML 模板。比如,运行 make:auth
Artisan 命令搭建应用的用户身份验证和注册页面的骨架,只要把这个组件放到 home.blade.php
Blade 模板中:
@extends('layouts.app')
@section('content')
<example-component></example-component>
@endsection
Tip:切记,每次修改了 Vue 组件,都要运行
npm run dev
命令。也可以运行npm run watch
命令监视和自动重编译发生变化的组件。
如果有进一步学习编写 Vue 组件的兴趣,可以阅读 Vue 文档 ,它提供了整个 Vue 框架全面、易读的概述。
使用 React#
如果更喜欢使用 React 构建 JavaScript 应用, Laravel 使得在 Vue 脚手架和 React 脚手架间切换变得非常容易。在纯净的 Laravel 应用中,可以使用带有 react
参数的 preset
命令来达到此目的:
php artisan preset react
此命令将删除 Vue 脚手架,并使用 React 脚手架代替它,同样包含一个组件示例。
本译文仅用于学习和交流目的,转载请务必注明文章译者、出处、和本文链接
我们的翻译工作遵照 CC 协议,如果我们的工作有侵犯到您的权益,请及时联系我们。
推荐文章: