前端指南
使用React
###簡介## ####雖然Laravel 不會強迫你使用哪個JavaScript 或CSS 預處理器，不過它提供了使用適用於許多應用場景的Bootstrap 和Vue 的起點。預設情況下， 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檔案包含vue、axios等幾個套件，以幫助你開始建立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腳手架代替它，同樣包含一個組件範例。
