JavaScript & CSS 脚手架

• 简介
• 编写 CSS
• 编写 JavaScript
  • 编写 Vue 组件
  • 使用 React

简介

虽然 Laravel 没有规定您使用哪种 JavaScript 或 CSS 预处理器，但它提供了一个使用 Bootstrap 和 Vue 的基本起点，它对于许多应用都会有所帮助。默认情况下，Laravel 使用 NPM 来安装这两个前端依赖包。

CSS

Laravel Mix 为编译 SASS 或 Less 提供了一个简洁而直观的 API，并通过增加变量、mixins 和其它强大的功能扩展了原生 CSS，让 CSS 使用起来更加愉快。在本文档中，我们会简要讨论 CSS 大体编译过程；不过，您最好还是查阅完整的 Laravel Mix 文档 来获取有关编译 SASS 或 Less 的更多信息。

JavaScript

Laravel 不要求您使用指定的 JavaScript 框架或库来构建应用。实际上，根本不必使用 JavaScript。但是，Laravel 还是包含了一些基本的脚手架，以便更容易使用 Vue 库来编写现代化的 JavaScript。Vue 为使用组件构建强大的 JavaScript 应用提供了直观的 API。和 CSS 一样，可以使用 Laravel Mix 来轻松将 JavaScript 组件编译为浏览器可使用的单个 JavaScript 文件。

移除前端脚手架

如果要移除应用的前端脚手架，可以使用 Artisan 命令 preset。该命令和 none 选项结合使用时，会从应用中移除 Bootstrap 和 Vue 脚手架，只留下一个空白的 SASS 文件和一些常用的 JavaScript 工具库：

php artisan preset none

编写 CSS

Laravel 的 package.json 文件引入了 bootstrap 依赖包，来帮助您使用 Bootstrap 构建应用的前端原型。不过，可以根据应用的需要随意添加或移除依赖包。不一定要使用 Bootstrap 框架来构建 Laravel 应用 —— 它只是为要使用它的人提供好的起点。

在编译 CSS 代码之前，使用 Node 包管理工具（NPM） 来安装项目的前端依赖：

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

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

npm install

默认情况下，Laravel 的 package.json 文件默认会包含一些依赖包来帮助您构建 JavaScript 应用，例如 vue 和 axios。可以根据需要在 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 文件通常会放置在 public/js 目录。

app.js 文件会加载 resources/js/bootstrap.js 文件来启动并配置 Vue，Axios，jQuery 和其它所有 JavaScript 依赖。如果您有其它的 JavaScript 依赖需要配置，也可以在该文件中完成。

编写 Vue 组件

新的 Laravel 应用默认会在 resources/js/components 目录中包含一个 ExampleComponent.vue Vue 组件。ExampleComponent.vue 文件是在同一文件中定义其 JavaScript 和 HTML 模板的 单文件 Vue 组件 示例。它为构建 JavaScript 驱动的应用提供了非常方便的方法。此示例组件已经在 app.js 文件中注册：

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

要在应用中使用组件，可以将其放到 HTML 模板之中。例如，在运行 Artisan 命令 make:auth 生成应用的用户认证和注册页面后，可以把组件放到 home.blade.php Blade 模板中：

@extends('layouts.app')

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

请记住，每次修改 Vue 组件后都应该运行 npm run dev 命令。或者，可以使用 npm run watch 命令来监控并在每次文件被修改时自动重新编译组件。

当然，如果您对编写 Vue 组件感兴趣，可以阅读 Vue 文档，该文档内容全面同时易于阅读。

使用 React

如果您喜欢用 React 来构建 JavaScript 应用，Laravel 中可以很容易将 Vue 脚手架替换为 React 脚手架。在任何新建的 Laravel 应用，使用 preset 命令加 react 选项：

php artisan preset react

该命令将移除 Vue 脚手架并替换为 React 脚手架，包括 Laravel 自带的示例组件。