JavaScript & CSS 腳手架

• 簡(jiǎn)介
• 編寫 CSS
• 編寫 JavaScript
  • 編寫 Vue 組件
  • 使用 React

簡(jiǎn)介

雖然 Laravel 并不強(qiáng)制你使用哪個(gè) JavaScript 或 CSS 預(yù)處理器，不過它提供了使用適用于許多應(yīng)用場(chǎng)景的 Bootstrap 和 Vue 的起點(diǎn)。默認(rèn)情況下， Laravel 使用  NPM 安裝這兩個(gè)前端包。

CSS

Laravel Mix 提供了干凈的、富有表現(xiàn)力的 API，用于編譯 SASS 和 Less，它們能夠拓展原始的 CSS，擁有向 CSS 中添加變量、mixins 和其它使 CSS 更好用的強(qiáng)大特性。在這篇文檔中，我們將簡(jiǎn)要說明 CSS 的大體編譯過程；不過，你最好翻閱完整的 Laravel Mix 文檔 以獲取編譯 SASS 和 Less 的詳細(xì)信息。

JavaScript

Laravel 不要求你使用特定的 JavaScript 框架或庫(kù)來構(gòu)建應(yīng)用。事實(shí)上，你完全可以不使用 JavaScript。但是 Laravel 包括了幾個(gè)基本的腳手架，它們可以使創(chuàng)建基于  Vue 庫(kù)的現(xiàn)代 JavaScript 變得更容易。Vue 提供了一個(gè)極富表現(xiàn)力的 API，使用組件來構(gòu)建健壯的 JavaScript。像 CSS 一樣，可以使用 Laravel Mix 輕松將 JavaScript 組件編譯到單個(gè)的、基于瀏覽器的 JavaScript 文件中。

刪除前端腳手架

想要從應(yīng)用中刪除前端腳手架，可以使用 preset Artisan 命令。執(zhí)行帶有 none 選項(xiàng)的  preset 命令，將從應(yīng)用中刪除 Bootstrap 和 Vue 腳手架，只保留空的  SASS 文件和幾個(gè)常用的 JavaScript 工具庫(kù)：

php artisan preset none

編寫 CSS

Laravel 的 package.json 文件包含 bootstrap 包，幫助你使用 Bootstrap 開始初始化應(yīng)用的前端。但是你可以根據(jù)你自己應(yīng)用的需要在  package.json 中添加或刪除依賴包。不是一定要使用 Bootstrap 框架構(gòu)建 Laravel 應(yīng)用，它只是為想使用它的人提供了一個(gè)易用的起點(diǎn)。

編譯 CSS 之前，請(qǐng)使用 Node 包管理器 (NPM) 安裝項(xiàng)目前端依賴：

npm install

一旦已經(jīng)使用 npm install 安裝了依賴包，就可以使用 Laravel Mix 將 SASS 編譯為原生 CSS。. npm run dev 命令將處理 webpack.mix.js 文件中的聲明。通常編譯后的 CSS 放在  public/css 目錄中：

npm run dev

Laravel 默認(rèn)自帶的 webpack.mix.js 文件將編譯 resources/sass/app.scss SASS 文件。 app.scss 導(dǎo)入 SASS 變量文件并加載 Bootstrap，它為多數(shù)應(yīng)用提供了一個(gè)易用的起點(diǎn)。 可以自由的定制 app.scss 文件，以通過 配置 Laravel Mix 來使用你所希望的甚至完全不同的預(yù)處理器。

編寫 JavaScript

應(yīng)用所依賴的所有 JavaScript 包必須能在項(xiàng)目根目錄的 package.json 文件中找到。這個(gè)文件與 composer.json 文件類似， composer.json 文件解決 PHP 的依賴關(guān)系，package.json 文件則解決 JavaScript 的依賴關(guān)系。使用 Node 包管理器 (NPM) 安裝這些依賴包：

npm install

{tip} 默認(rèn)情況下， Laravel 的 package.json 文件包含 vue 、 axios 等幾個(gè)包，以幫助你開始構(gòu)建 JavaScript 應(yīng)用?？梢愿鶕?jù)應(yīng)用的需要隨意添加或刪除 package.json 文件中的依賴。

一旦安裝了這些包，就可以使用 npm run dev 命令 編譯你的資源。Webpack 現(xiàn)代 JavaScript 應(yīng)用的模塊打包器。運(yùn)行 npm run dev 命令時(shí)， Webpack 將執(zhí)行 webpack.mix.js 文件中的指令：

npm run dev

默認(rèn)情況下， Laravel 的 webpack.mix.js 文件編譯 SASS 和 resources/js/app.js 文件。你可以在 app.js 文件中注冊(cè)組件，如果你喜歡利用其它框架配置自己的 JavaScript 應(yīng)用。編譯過的 JavaScript 通常放置在 public/js 目錄。

{tip}  app.js 文件將載入 resources/js/bootstrap.js 文件，它負(fù)責(zé)配置和啟動(dòng) Vue、 Axios、 jQuery 和其它 JavaScript 依賴。如果你想配置額外的 JavaScript 依賴，可以在這個(gè)文件內(nèi)完成。

編寫 Vue 組件

默認(rèn)情況下，純凈的 Laravel 應(yīng)用包含 ExampleComponent.vue Vue 組件，存放在 resources/js/components 目錄中。 ExampleComponent.vue 文件是一個(gè) 單文件 Vue 組件 示例，在同一個(gè)文件中定義了組件的 JavaScript 和 HTML 。單文件組件提供了構(gòu)建 JavaScript 驅(qū)動(dòng)應(yīng)用的簡(jiǎn)便方法。這個(gè)示例組件是在 app.js 文件中注冊(cè)的：

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

要在應(yīng)用中使用該組件，需要將其放入 HTML 模板。比如，運(yùn)行 make:auth Artisan 命令搭建應(yīng)用的用戶身份驗(yàn)證和注冊(cè)頁(yè)面的骨架，只要把這個(gè)組件放到 home.blade.php Blade 模板中：

@extends('layouts.app')
@section('content')  
  <example-component></example-component>
 @endsection

{tip} 切記，每次修改了 Vue 組件，都要運(yùn)行 npm run dev 命令。也可以運(yùn)行  npm run watch 命令監(jiān)視和自動(dòng)重編譯發(fā)生變化的組件。

如果有進(jìn)一步學(xué)習(xí)編寫 Vue 組件的興趣，可以閱讀 Vue 文檔 ，它提供了整個(gè) Vue 框架全面、易讀的概述。

使用 React

如果更喜歡使用 React 構(gòu)建 JavaScript 應(yīng)用， Laravel 使得在 Vue 腳手架和 React 腳手架間切換變得非常容易。在純凈的 Laravel 應(yīng)用中，可以使用帶有  react 參數(shù)的 preset 命令來達(dá)到此目的：

php artisan preset react

此命令將刪除 Vue 腳手架，并使用 React 腳手架代替它，同樣包含一個(gè)組件示例。