[TOC] # JavaScript & CSS 腳手架 ## 簡介 Laravel 默然包含 [Bootstrap](https://getbootstrap.com/) 和 [Vue](https://vuejs.org/) 兩個腳手架。 > 提示：默認情況下， Laravel 的`package.json`文件包含`vue`、`axios`等幾個包，以幫助你開始構建 JavaScript 應用。可以根據應用的需要隨意添加或刪除`package.json`文件中的依賴。 ## 刪除前端腳手架 使用`preset`Artisan 命令從應用中刪除 Bootstrap 和 Vue 腳手架，只保留空的 SASS 文件和幾個常用的 JavaScript 工具庫： ``` $ php artisan preset none ``` ## 安裝依賴 ``` // 確保已安裝 Node.js 和 NPM node -v npm -v $ npm install ``` > Tip：`app.js`文件將載入`resources/js/bootstrap.js`文件，它負責配置和啟動 Vue、 Axios、 jQuery 和其它 JavaScript 依賴。如果你想配置額外的 JavaScript 依賴，可以在這個文件內完成。 ## 編譯代碼 ``` // 未被壓縮，開發模式 $ npm run dev $ npm run developmennt // 自動壓縮，生產模式 $ npm run prod $ npm run production // 監視文件自動編譯 $ npm run watch // 在某些環境中，當文件更改時，Webpack 不會更新 $ npm run watch-poll ``` ## 編寫 Vue 組件 默認情況下，純凈的 Laravel 應用包含`ExampleComponent.vue`Vue 組件，存放在`resources/js/components`目錄中。`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 ``` >[success] 注意：每次修改了 Vue 組件，都要運行`npm run dev`命令。也可以運行`npm run watch`命令監視和自動重編譯發生變化的組件。 ## 使用 React 在純凈的 Laravel 應用中，可以使用帶有`react`參數的`preset`命令刪除 Vue 腳手架，并使用 React 腳手架代替，同樣包含一個組件示例。 ``` $ php artisan preset react ```