# JavaScript & CSS 脚手架
- [简介](#introduction)
- [编写 CSS](#writing-css)
- [编写 JavaScript](#writing-javascript)
- [编写 Vue 组件](#writing-vue-components)
- [使用 React](#using-react)
## 简介
虽然 Laravel 并不强制你使用哪个 JavaScript 或 CSS 预处理器,不过它提供了使用适用于许多应用场景的 [Bootstrap](https://getbootstrap.com/) 和 [Vue](https://vuejs.org/) 的起点。默认情况下, Laravel 使用 [NPM](https://www.npmjs.org/) 安装这两个前端包。
Laravel 提供的引导和 vue 脚手架位于 `laravel/ui` composer 包中,可以使用 composer 进行安装:
composer require laravel/ui:^1.0 --dev
安装完 `laravel/ui` 包后,可以使用 `ui` artisan 命令安装前端脚手架:
// 生成基本脚手架
php artisan ui bootstrap
php artisan ui vue
php artisan ui react
// 生成 登录/注册 脚手架...
php artisan ui bootstrap --auth
php artisan ui vue --auth
php artisan ui react --auth
#### CSS
[Laravel Mix](/docs/{{version}}/mix) 提供了干净的、富有表现力的 API,用于编译 SASS 和 Less,它们能够拓展原始的 CSS,拥有向 CSS 中添加变量、mixins 和其它使 CSS 更好用的强大特性。在这篇文档中,我们将简要说明 CSS 的大体编译过程;不过,你最好翻阅完整的 [Laravel Mix 文档](/docs/{{version}}/mix) 以获取编译 SASS 和 Less 的详细信息。
#### JavaScript
Laravel 不要求你使用特定的 JavaScript 框架或库来构建应用。事实上,你完全可以不使用 JavaScript。但是 Laravel 包括了几个基本的脚手架,它们可以使创建基于 [Vue](https://vuejs.org/) 库的现代 JavaScript 变得更容易。Vue 提供了一个极富表现力的 API,使用组件来构建健壮的 JavaScript。像 CSS 一样,可以使用 Laravel Mix 轻松将 JavaScript 组件编译到单个的、基于浏览器的 JavaScript 文件中。
## 编写 CSS
在安装 `laravel/ui` 编写器包并[生成前端脚手架](#introduction) 之后,Laravel的 `package.json` 文件将包含 `bootstrap` 包,以帮助你开始使用 bootstrap 对应用程序的前端进行原型设计。但是你可以根据自己应用的需要,在 `package.json` 文件中,随意添加或删除依赖包。不是一定要使用 Bootstrap 框架来构建您的 Laravel 应用程序,它只是为想使用它的人提供了一个易用的起点。
编译 CSS 之前,请使用 [Node 包管理器 (NPM)](https://www.npmjs.org/) 安装项目前端依赖:
npm install
一旦已经使用 `npm install` 安装了依赖包,就可以使用 [Laravel Mix](/docs/{{version}}/mix#working-with-stylesheets) 将 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](/docs/{{version}}/mix) 来使用你所希望的甚至完全不同的预处理器。
## 编写 JavaScript
应用所依赖的所有 JavaScript 包必须能在项目根目录的 `package.json` 文件中找到。这个文件与 `composer.json` 文件类似, `composer.json` 文件解决 PHP 的依赖关系,`package.json` 文件则解决 JavaScript 的依赖关系。使用 [Node 包管理器 (NPM)](https://www.npmjs.org)安装这些依赖包::
npm install
> Tip:默认情况下, Laravel 的 `package.json` 文件包含 `vue` 、 `axios` 等几个包,以帮助你开始构建 JavaScript 应用。可以根据应用的需要随意添加或删除 `package.json` 文件中的依赖。
一旦安装了这些包,就可以使用 `npm run dev` 命令[ 编译你的资源](/docs/{{version}}/mix)。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 / ui` 包给你的前端搭脚手架时,`ExampleComponent.vue` Vue 组件将会放置在 `resources/js/components` 目录中。 `ExampleComponent.vue` 文件是一个 [单文件 Vue 组件](https://vuejs.org/guide/single-file-components) 示例,在同一个文件中定义了组件的 JavaScript 和 HTML 。单文件组件提供了构建 JavaScript 驱动应用的简便方法。这个示例组件是在 `app.js` 文件中注册的:
Vue.component(
'example-component',
require('./components/ExampleComponent.vue').default
);
要在应用中使用该组件,需要将其放入 HTML 模板。比如,运行 `php artisan ui vue --auth` Artisan 命令搭建应用的用户身份验证和注册页面的骨架,只要把这个组件放到`home.blade.php` Blade 模板中:
@extends('layouts.app')
@section('content')
@endsection
> {tip} 切记,每次修改了 Vue 组件,都要运行 `npm run dev` 命令。也可以运行 `npm run watch-poll` 命令监视和自动重编译发生变化的组件。
如果有进一步学习编写 Vue 组件的兴趣,可以阅读 [Vue 文档](https://vuejs.org/guide/) ,它提供了整个 Vue 框架全面、易读的概述。
### 使用 React
如果更喜欢使用 React 构建 JavaScript 应用, Laravel 使得在 Vue 脚手架和 React 脚手架间切换变得非常容易。在纯净的 Laravel 应用中,可以使用带有 `react` 参数的 `preset` 命令来达到此目的:
composer require laravel/ui
php artisan ui react
// 生成 登录 / 注册 脚手架...
php artisan ui react --auth