前端指南

未匹配的标注
本文档最新版为 11.x,旧版本可能放弃维护,推荐阅读最新版!

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 不要求你使用特定的 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 文件包含 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 文件中注册组件,如果你喜欢利用其它框架配置自己的 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 脚手架代替它,同样包含一个组件示例。

本文章首发在 LearnKu.com 网站上。

本译文仅用于学习和交流目的,转载请务必注明文章译者、出处、和本文链接
我们的翻译工作遵照 CC 协议,如果我们的工作有侵犯到您的权益,请及时联系我们。

原文地址:https://learnku.com/docs/laravel/5.8/fro...

译文地址:https://learnku.com/docs/laravel/5.8/fro...

上一篇 下一篇
《L03 构架 API 服务器》
你将学到如 RESTFul 设计风格、PostMan 的使用、OAuth 流程,JWT 概念及使用 和 API 开发相关的进阶知识。
《G01 Go 实战入门》
从零开始带你一步步开发一个 Go 博客项目,让你在最短的时间内学会使用 Go 进行编码。项目结构很大程度上参考了 Laravel。
贡献者:4
讨论数量: 0
发起讨论 只看当前版本


暂无话题~