前端指南
前端指南
JavaScript & CSS 腳手架
簡介
雖然 Laravel 并不強制你使用哪個 JavaScript 或 CSS 預處理器，不過它提供了使用適用于許多應用場景的 Bootstrap 和 Vue 的起點。默認情況下， Laravel 使用 NPM 安裝這兩個前端包。
CSS
Laravel Mix 提供了干凈的、富有表現(xiàn)力的 API，用于編譯 SASS 和 Less，它們能夠拓展原始的 CSS，擁有向 CSS 中添加變量、mixins 和其它使 CSS 更好用的強大特性。在這篇文檔中，我們將簡要說明 CSS 的大體編譯過程；不過，你最好翻閱完整的 Laravel Mix 文檔 以獲取編譯 SASS 和 Less 的詳細信息。
JavaScript
Laravel 不要求你使用特定的 JavaScript 框架或庫來構建應用。事實上，你完全可以不使用 JavaScript。但是 Laravel 包括了幾個基本的腳手架，它們可以使創(chuàng)建基于 Vue 庫的現(xiàn)代 JavaScript 變得更容易。Vue 提供了一個極富表現(xiàn)力的 API，使用組件來構建健壯的 JavaScript。像 CSS 一樣，可以使用 Laravel Mix 輕松將 JavaScript 組件編譯到單個的、基于瀏覽器的 JavaScript 文件中。
刪除前端腳手架
想要從應用中刪除前端腳手架，可以使用 preset Artisan 命令。執(zhí)行帶有 none 選項的 preset 命令，將從應用中刪除 Bootstrap 和 Vue 腳手架，只保留空的 SASS 文件和幾個常用的 JavaScript 工具庫：
php artisan preset none
編寫 CSS
Laravel 的 package.json 文件包含 bootstrap 包，幫助你使用 Bootstrap 開始初始化應用的前端。但是你可以根據(jù)你自己應用的需要在 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，它為多數(shù)應用提供了一個易用的起點。 可以自由的定制 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 應用?？梢愿鶕?jù)應用的需要隨意添加或刪除package.json文件中的依賴。
一旦安裝了這些包，就可以使用 npm run dev 命令 編譯你的資源。Webpack 現(xiàn)代 JavaScript 應用的模塊打包器。運行 npm run dev 命令時， Webpack 將執(zhí)行 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命令監(jiān)視和自動重編譯發(fā)生變化的組件。
如果有進一步學習編寫 Vue 組件的興趣，可以閱讀 Vue 文檔 ，它提供了整個 Vue 框架全面、易讀的概述。
使用 React
如果更喜歡使用 React 構建 JavaScript 應用， Laravel 使得在 Vue 腳手架和 React 腳手架間切換變得非常容易。在純凈的 Laravel 應用中，可以使用帶有 react 參數(shù)的 preset 命令來達到此目的：
php artisan preset react
此命令將刪除 Vue 腳手架，并使用 React 腳手架代替它，同樣包含一個組件示例。