前端指南

更新时间: 2019-07-31 20:15

简介

虽然 Laravel 并不强制你使用哪个 JavaScript 或 CSS 预处理器,但还是提供了适合多数应用的 BootstrapVue 作为起点。默认情况下, Laravel 使用 NPM 来安装这些前端依赖包。

CSS

Laravel Mix 提供了一个简洁、友好的 API 用于编译 SASS 或 Less 。 SASS 和 Less 扩展了 CSS ,添加了变量、 mixins 等强大特性,使得编写 CSS 更加轻松。 这篇文档将简要探讨 CSS 大体的编译过程,不过,你最好还是查阅完整的 Laravel Mix 文档 获取更多信息。

JavaScript

Laravel 并不强制使用特定的 JavaScript 框架或库来构建应用。当然,你也可以完全不用 JavaScript 。不过, Laravel 还是提供了一些基本的脚手架,能更容易地使用 Vue 库来编写现代 JavaScript 。 Vue 提供了一个友好的 API ,通过组件就可以构建强大的 JavaScript 应用。和 CSS 一样,用 Laravel Mix 就能轻松把多个 JavaScript 组件编译到单个 JavaScript 文件中。

移除前端脚手架

如果要移除应用的前端脚手架, preset Artisan 会派上用场。这个命令和选项 none 配合使用,会移除应用的 Bootstrap 和 Vue 脚手架,仅保留一个空的 SASS 文件和几个通用的 JavaScript 库:

php artisan preset none

编写 CSS

Laravel 的 package.json 引入了 bootstrap 包, Bootstrap 帮助你构建应用的前端雏形。不过,根据需求, package.json 文件的包可以随意添加或删除。构建 Laravel 应用时, Bootstrap 框架不是必须的,它只是给那些想要使用它的人提供一个好的起点。

编译 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 会编译 SASS 文件 resources/sass/app.scss 。文件 app.scss 会引入一个包含 SASS 变量的文件,并加载 Bootstrap ,这为多数应用提供了一个好的起点。根据需要,文件 app.scss 可随意修改,甚至通过 配置 Laravel Mix 使用一个完全不同的预处理器。

编写 JavaScript

项目所有的 JavaScript 依赖都可以在其根目录下的 package.json 文件中找到。这个文件类似于 composer.json ,只是前者指定 JavaScript 依赖,后者指定 PHP 依赖。使用 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 文件中,可以注册 Vue 组件,或使用其他框架进行配置。通常,编译后的 JavaScript 放在 public/js 目录下。

{tip} 文件 app.js 会加载 resources/js/bootstrap.js ,这个文件将引导和配置 Vue, Axios, jQuery 以及其他的 JavaScript 依赖。如果有额外的 JavaScript 依赖需要配置,也可以在这里进行。

编写 Vue 组件

新安装的 Laravel 应用在 resources/js/components 目录默认包含一个 ExampleComponent.vue Vue 组件。 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 脚手架,组件实例也会相应替换。

未来简史

未来简史

[以色列] 尤瓦尔·赫拉利 / 林俊宏 / 中信出版集团 / 2017-2 / 68.00元

进入21世纪后,曾经长期威胁人类生存、发展的瘟疫、饥荒和战争已经被攻克,智人面临着新的待办议题:永生不老、幸福快乐和成为具有“神性”的人类。在解决这些新问题的过程中,科学技术的发展将颠覆我们很多当下认为无需佐证的“常识”,比如人文主义所推崇的自由意志将面临严峻挑战,机器将会代替人类做出更明智的选择。 更重要的,当以大数据、人工智能为代表的科学技术发展的日益成熟,人类将面临着从进化到智人以来z......一起来看看 《未来简史》 这本书的介绍吧!

URL 编码/解码

URL 编码/解码

URL 编码/解码

RGB HSV 转换

RGB HSV 转换

RGB HSV 互转工具