前端指南 · Laravel 5.6 中文文檔

* * * * * [TOC] ## 簡介 Laravel 雖然不強制你使用哪個 JavaScript 或 CSS 預處理器，但還是提供了適用多數應用的?[Bootstrap](https://getbootstrap.com/)?和?[Vue](https://vuejs.org/)?來作為起點。默認情況下，Laravel 使用?[NPM](https://www.npmjs.org/)?安裝這些前端依賴包。 #### CSS [Laravel Mix](http://www.hmoore.net/tonyyu/laravel_5_6/786204)?提供了一個簡潔、友好的 API 用于編譯 SASS 或 Less。 SASS 和 Less 擴展了 CSS，添加了變量、mixins 等強大特性，使得編寫 CSS 更加輕松。這篇文檔將簡要討論 CSS 大體編譯過程，不過，你最好還是查閱完整的?[Laravel Mix 文檔](http://www.hmoore.net/tonyyu/laravel_5_6/786204)?獲取更多信息。 #### 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 artisan preset none ~~~ ## 編寫 CSS Laravel 的?`package.json`?引入了?`bootstrap`?包，Bootstrap 會幫你構建應用的前端雛形。不過，根據需求，`package.json`?文件的包可隨意添加或刪除。構建 Laravel 應用時，Bootstrap 框架不是必須的，它只是給那些想使用它的人提供了一個好的起點。在編譯 CSS 之前，須使用?[Node 包管理工具 (NPM)](https://www.npmjs.org/)?安裝應用的前端依賴： ~~~ npm install ~~~ 運行?`npm install`?安裝好前端依賴后，就可以使用?[Laravel Mix](http://www.hmoore.net/tonyyu/laravel_5_6/786204#_60)?將 SASS 文件編譯成原生 CSS。`npm run dev`?命令會處理?`webpack.mix.js`?文件的指令。通常，編譯后的 CSS 放置在?`public/css`?目錄下： ~~~ npm run dev ~~~ Laravel 默認的?`webpack.mix.js`?會編譯 SASS 文件?`resources/assets/sass/app.scss`。文件?`app.scss`?會引入一個包含 SASS 變量的文件，并加載 Bootstrap，這為大多應用提供了一個好的起點。根據需要，文件?`app.scss`?可隨意修改，甚至通過?[配置 Laravel Mix](http://www.hmoore.net/tonyyu/laravel_5_6/786204)?使用一個完全不同的預處理器。 ## 編寫 JavaScript 項目所有的 JavaScript 依賴都可以在其根目錄下的?`package.json`?文件中找到。這個文件和?`composer.json`?類似，只是一個指定 JavaScript 依賴，一個指定 PHP 依賴。使用?[Node 依賴管理工具 (NPM)](https://www.npmjs.org/)?安裝依賴： ~~~ npm install ~~~ > {tip} 默認情況下，Laravel 的?`package.json`?文件引入了?`vue`?和?`axios`?等包來幫你構建 JavaScript 應用。根據需求，`package.json`?可隨意添加或移除依賴。安裝好依賴后，就可以使用?`npm run dev`?命令?[編譯資源文件](http://www.hmoore.net/tonyyu/laravel_5_6/786204)?了。Webpack 是為現代 JavaScript 而生的模塊打包工具。運行?`npm run dev`?命令，Webpack 會執行?`webpack.mix.js`?中的指令： ~~~ npm run dev ~~~ 默認情況下，Laravel 自帶的?`webpack.mix.js`?文件會編譯 SASS 和?`resources/assets/js/app.js`?文件。`app.js`?文件中，可以注冊 Vue 組件，或使用其他框架進行配置。通常，編譯后的 JavaScript 放在?`public/js`目錄下。 > {tip} 文件?`app.js`?會加載?`resources/assets/js/bootstrap.js`，這個文件將引導和配置 Vue，Axios，jQuery以及其他的 JavaScript 依賴。如果有額外的 JavaScript 依賴需要配置，也可以在這里進行。 ### 編寫 Vue 組件新安裝的 Laravel 應用在?`resources/assets/js/components`?目錄包含一個?`ExampleComponent.vue`?Vue 組件。`ExampleComponent.vue`?是?[單文件 Vue 組件](https://vuejs.org/guide/single-file-components)?的實例，定義了自身的 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 文檔](https://vuejs.org/guide/)，它對整個 Vue 框架進行了充分的綜述。 ### 使用 React 如果傾向 React 構建 JavaScript 應用，在 Laravel 中將 Vue 腳手架替換為 React 腳手架也非難事。在任意新安裝的 Laravel 應用中，使用帶?`react`?選項的?`preset`?命令即可： ~~~ php artisan preset react ~~~ 這個命令將移除 Vue 腳手架并替換為 React 腳手架，組件實例也會相應替換。