# Laravel 的前端資源處理 JavaScript 和 CSS 構建 - [簡介](#introduction) - [編寫 CSS](#writing-css) - [編寫 JavaScript](#writing-javascript) - [編寫 Vue 組件](#writing-vue-components) - [使用 React](#using-react) <a name="introduction"></a> ## 簡介 Laravel 并沒有規定你使用哪個 JavaScript 或 CSS 預處理器，不過默認提供了對大多數應用都很適用的 [Bootstrap](http://getbootstrap.com) 和 [Vue](https://vuejs.org) 來作為起點。 Laravel 默認使用 [NPM](https://npmjs.org) 安裝這些前端的依賴。 #### CSS [Laravel Mix](/docs/{{version}}/mix) 提供了一個簡潔、富有表現力的 API 用以編譯 SASS 或 Less，這些 CSS 預處理語言擴充了 CSS 語言，增加了諸如變量、混合（mixins）及其他一些強大的功能讓編寫 CSS 代碼變得更加有趣。 盡管我們會在這里簡要的討論 CSS 編譯的內容，但是，你應該訪問 [Laravel Mix 文檔](/docs/{{version}}/mix) 獲取更多關于編譯 SASS 或 Less 的信息。 #### JavaScript Laravel 并不需要你使用特定的 JavsScript 框架或者庫來構建應用程序。事實上，你也可以完全不用 JavaScript。不過，Laravel 自帶了用 [Vue](https://vuejs.org) 實現的基本框架代碼來幫你更輕松的開始現代化 JavaScript 編碼。Vue 提供了強大的組件化 API 用來構建健壯的 JavaScript 應用程序。 #### 移除前端框架 如果你想從你的應用程序中移除前端框架，可以使用 `preset` Artisan 命令。該命令加上 `none` 選項時，將從應用程序中刪除 Bootstrap 和 Vue 框架，只留下一個空白的SASS文件和一些常用的JavaScript實用程序庫: php artisan preset none <a name="writing-css"></a> ## 編寫 CSS Laravel 的 `Package.json` 文件引入了 `bootstrap-sass` 依賴包以幫助你使用 Bootstrap 制作應用程序的前端原型。不過，你可以根據自己應用程序的需要在 `package.json` 靈活的添加或者移除依賴包。使用 Bootstrap 框架來構建你的 Laravel 應用程序并不是必選項，它只是給那些想用它的人提供一個很好的起點。 編譯 CSS 代碼之前，需要你先使用 NPM 來安裝前端的依賴： npm install 使用 `npm install` 成功安裝依賴之后，你就可以使用 [Laravel Mix](/docs/{{version}}/mix#working-with-stylesheets) 來將 SASS 文件編譯為純 CSS。.`npm run dev` 命令會執行處理 `webpack.mix.js` 文件中的指令。通常情況下，編譯好的 CSS 代碼會被放置在 `public/css` 目錄： npm run dev 默認情況下，`webpack.mix.js` 會編譯 `resources/assets/sass/app.scss` SASS 文件。`app.scss` 文件導入了一個包含 SASS 變量的文件，加載了 Bootstrap 框架，這對大多數程序來說是一個很好的出發點。你也可以根據自己的需要去定制 `app.scss` 文件的內容，甚至使用完全不同的預處理器，詳細配置見 [配置 Laravel Mix](/docs/{{version}}/mix)。 <a name="writing-javascript"></a> ## 編寫 JavaScript 在項目根目錄中的 `package.json` 可以找到應用程序的所有 JavaScript 依賴。它和 `composer.json` 文件類似，不同的是它指定的是 JavaScript 的依賴而不是 PHP 的依賴。使用 [Node 包管理器 (NPM)](https://npmjs.org) 來安裝這些依賴包： npm install Laravel `package.json` 文件默認會包含一些依賴包來幫助你開始建立 JavaScript 應用程序，例如 `vue` 和 `axios` 。你可以根據自己程序的需要在 `package.json` 中添加或者移除依賴。 成功安裝依賴之后，你就可以使用 `npm run dev` 命令來 [編譯資源文件](/docs/{{version}}/mix) 。Webpack 是一個為現代 JavaScript 應用而生的模塊構建工具。當你運行 `npm run dev` 命令時，Webpack 會執行 `webpack.mix.js` 文件中的指令： npm run dev 默認情況下，`webpack.mix.js` 會編譯 SASS 文件和 `resources/assets/js/app.js` 文件。你可以在 `app.js` 文件中注冊你的 Vue 組件，或者如果你更喜歡其他的框架，也可以在這里進行配置。編譯好的 JavaScript 文件通常會放置在 `public/js` 目錄。 > {tip} `app.js` 會加載 `resources/assets/js/bootstrap.js` 文件來啟動、 配置 Vue，Vue Resource，jQuery，以及其他的 JavaScript 依賴。如果你有額外的 JavaScript 依賴需要去配置，你也可以在這個文件中完成。 <a name="writing-vue-components"></a> ### 編寫 Vue 組件 全新安裝的 Laravel 程序默認會在 `resources/assets/js/components` 中包含一個 `Example.vue` 的 Vue 組件。`Example.vue` 文件是一個 [單文件 Vue 組件](https://vuejs.org/guide/application.html#Single-File-Components) 的示例，單文件 Vue 組件允許我們在同一個文件中編寫 JavaScript 和 HTML 模板，它提供了一種非常方便的方式去構建 JavaScript 驅動的應用程序。這個示例組件注冊在 `app.js` 文件。 Vue.component('example', require('./components/Example.vue')); 在應用程序中使用示例組件，你只需要簡單的將其放到你的 HTML 模板之中。例如，在你運行 `make:auth` Artisan 命令去生成應用的用戶認證和注冊的框架頁面后，你可以把組件放到 `home.blade.php` Blade 模板： @extends('layouts.app') @section('content') <example></example> @endsection > {tip} 謹記，你需要在每次修改 Vue 組件后都需要運行 `npm run dev` 命令。或者，你可以使用 `npm run watch` 命令來監控并在每次文件被修改時自動重新編譯組件。 當然，如果你對學習更多編寫 Vue 組件的內容感興趣，你可以讀一下 [Vue 官方引導文檔](http://vuejs.org/guide/)，它提供了一個透徹、易懂的文檔讓你一覽 Vue 框架的概貌。 <a name="using-react"></a> ### 使用 React 如果你偏好用 React 來構建你的 JavaScript 應用程序，Laravel 很容易就能將 Vue 框架替換為 React 框架。在任何新建的 Laravel 應用程序下，你可以用 `preset` 命令加 `react` 選項: php artisan preset react 該命令將移除 Vue 框架并以 React 框架替換， 包括一個示例組件。 --- > {note} 歡迎任何形式的轉載，但請務必注明出處，尊重他人勞動共創開源社區。 > > 轉載請注明：本文檔由 Laravel China 社區 [laravel-china.org](https://laravel-china.org) 組織翻譯，詳見 [翻譯召集帖](https://laravel-china.org/topics/5756/laravel-55-document-translation-call-come-and-join-the-translation)。 > > 文檔永久地址： https://d.laravel-china.org