# 前端指南
雖然 Laravel 并不強制你使用哪個 JavaScript 或 CSS 預處理器，但還是提供了適合多數應用的[Bootstrap](https://getbootstrap.com/)和[Vue](https://vuejs.org/)作為起點。默認情況下， Laravel 使用[NPM](https://www.npmjs.org/)來安裝這些前端依賴包。
#### CSS
[Laravel Mix](https://laravel-china.org/docs/laravel/5.7/mix)提供了一個簡潔、友好的 API 用于編譯 SASS 或 Less 。 SASS 和 Less 擴展了 CSS ，添加了變量、 mixins 等強大特性，使得編寫 CSS 更加輕松。 這篇文檔將簡要探討 CSS 大體的編譯過程，不過，你最好還是查閱完整的[Laravel Mix 文檔](https://laravel-china.org/docs/laravel/5.7/mix)獲取更多信息。
#### JavaScript
Laravel 并不強制使用特定的 JavaScript 框架或庫來構建應用。當然，你也可以完全不用 JavaScript 。不過， Laravel 還是提供了一些基本的腳手架，能更容易地使用[Vue](https://vuejs.org/)庫來編寫現代 JavaScript 。 Vue 提供了一個友好的 API ，通過組件就可以構建強大的 JavaScript 應用。和 CSS 一樣，用 Laravel Mix 就能輕松把多個 JavaScript 組件編譯到單個 JavaScript 文件中。
#### 移除前端腳手架
如果要移除應用的前端腳手架，`preset`Artisan 會派上用場。這個命令和選項`none`配合使用，會移除應用的 Bootstrap 和 Vue 腳手架，僅保留一個空的 SASS 文件和幾個通用的 JavaScript 庫：
~~~php
php artisan preset none
~~~
## 編寫 CSS
Laravel 的`package.json`引入了`bootstrap`包， Bootstrap 幫助你構建應用的前端雛形。不過，根據需求，`package.json`文件的包可以隨意添加或刪除。構建 Laravel 應用時， Bootstrap 框架不是必須的，它只是給那些想要使用它的人提供一個好的起點。
編譯 CSS 之前，首先使用[Node 包管理工具 (NPM)](https://www.npmjs.org/)安裝應用的前端依賴：
~~~php
npm install
~~~
運行`npm install`安裝好前端依賴后，就可以使用[Laravel Mix](https://laravel-china.org/docs/laravel/5.7/mix#working-with-stylesheets)將 SASS 文件編譯成原生 CSS 文件。`npm run dev`命令會處理`webpack.mix.js`文件中的指令。通常，編譯后的 CSS 放置在`public/css`目錄下：
~~~php
npm run dev
~~~
Laravel 默認的`webpack.mix.js`會編譯 SASS 文件`resources/sass/app.scss`。文件`app.scss`會引入一個包含 SASS 變量的文件，并加載 Bootstrap ，這為多數應用提供了一個好的起點。根據需要，文件`app.scss`可隨意修改，甚至通過[配置 Laravel Mix](https://laravel-china.org/docs/laravel/5.7/mix)使用一個完全不同的預處理器。
## 編寫 JavaScript
項目所有的 JavaScript 依賴都可以在其根目錄下的`package.json`文件中找到。這個文件類似于`composer.json`，只是前者指定 JavaScript 依賴，后者指定 PHP 依賴。使用[Node 包管理工具 (NPM)](https://www.npmjs.org/)安裝依賴：
~~~php
npm install
~~~
> {tip} 默認情況下， Laravel 的`package.json`文件引入了`vue`和`axios`等包來幫助你構建 JavaScript 應用。根據需求，`package.json`文件可以隨意添加或移除依賴。
安裝好依賴后，就可以運行`npm run dev`命令來[編譯資源文件](https://laravel-china.org/docs/laravel/5.7/mix)了。 Webpack 是為現代 JavaScript 而生的模塊打包工具。運行`npm run dev`命令， Webpack會執行`webpack.mix.js`中的指令：
~~~php
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 組件](https://vuejs.org/guide/single-file-components)的實例，定義了自身的 JavaScript 和 HTML 模版。單文本組件為構建 JavaScript 驅動的應用提供了便利。這個實例組件已經在`app.js`文件中注冊：
~~~php
Vue.component(
'example-component',
require('./components/ExampleComponent.vue')
);
~~~
想要在應用中使用組件，只需要把它放在 HTML 模版中即可。例如，運行`make:auth`Artisan 命令生成應用的認證和注冊頁面后，就可以把它置入`home.blade.php`Blade 模版：
~~~php
@extends('layouts.app')
@section('content')
<example-component></example-component>
@endsection
~~~
> {tip} 謹記，每次修改 Vue 組件后，都應該運行`npm run dev`命令。或者，運行`npm run watch`命令監聽組件的每次修改，進行自動編譯。
需要 Vue 組件更多信息的話，可以閱讀[Vue 官方文檔](https://vuejs.org/guide/), 它對整個 Vue 框架進行了充分、易讀的綜述。
### 使用 React
如果傾向使用 React 構建 JavaScript 應用，在 Laravel 中將 Vue 腳手架替換為 React 腳手架也并非難事。在任何新安裝的 Laravel 應用中，使用帶`react`選項的`preset`命令即可：
~~~php
php artisan preset react
~~~
這個命令將移除 Vue 腳手架并替換為 React 腳手架，組件實例也會相應替換。
