最近在學Laravel，遇到前端資源加載的問題，記錄一下。
一、前端共用資源的配置
1. webpack.mix.js
//一般不太更動，透過以下兩個檔案講所需資源加載。
mix.js('resources/assets/js/app.js', 'public/js')
.sass('resources/assets/sass/app.scss', 'public/css');
2. npm 命令安裝前端套件資源(以jquery-ui為例)
npm install jquery-ui --save-dev
// --save-dev 為加入到package.json：devdependencies中
3. 配置JS資源
// resources/assets/js/app.js
try {
window.$ = window.jQuery = require('jquery');
require('bootstrap-sass');
window.datepicker = require('jquery-ui');
// 或 import 'jquery-ui/ui/widgets/datepicker.js';
// add as many widget as you may need
// 路徑到node_modules/jquery-ui...去找
} catch (e) { }
4. 配置CSS資源
// resources/assets/sass/app.scss
@import '~jquery-ui/themes/base/all.css';
/* 路徑到node_modules/jquery-ui...去找 */
5. 初始/啟用套件模組
// resources/assets/js/app.js
$('.datepicker').datepicker();
// e.g input type="text" class="datepicker" />
// 此例之datepicker僅示范，datepicker非所有頁面共用，建議寫在view(blade)里面，見下段push的方式。
// vue所有頁面共用，可以在app.js初始/啟用
6. npm編譯
npm run dev
#resource檔案夾下的資源需要編譯才會生效
二、各頁面私有資源
1. 共用標題模板
@stack('styles')
@stack('scripts')
!--
在適當位置加入以上兩條語句，建議@stack('styles'放在head>中，
@stack('scripts')放在body>內底部(部分JS需要等DOM加載完成方可使用)。
-->
2. 各頁面內容模板
@push('styles')
link rel="stylesheet" href="{{ asset('Path_to_CSS') }}" rel="external nofollow" >
@endpush
@push('scripts')
script src="{{ asset('Path_to_JS') }}">/script>
@endpush
@section('content')
div>
...
/div>
@endsection
以上這篇Laravel 前端資源配置教程就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
您可能感興趣的文章:- Laravel如何友好的修改.env配置文件詳解
- Nginx中運行PHP框架Laravel的配置文件分享
- Laravel框架環境與配置操作實例分析
- laravel config文件配置全局變量的例子
- Laravel數據庫讀寫分離配置的方法
- Laravel 數據庫加密及數據庫表前綴配置方法
- laravel框架數據庫配置及操作數據庫示例
- laravel-admin自動生成模塊,及相關基礎配置方法
- laravel 配置路由 api和web定義的路由的區別詳解
- Laravel5.6框架使用CKEditor5相關配置詳解
- Laravel配置全局公共函數的方法步驟
- Laravel5框架自定義錯誤頁面配置操作示例
- laravel配置Redis多個庫的實現方法
- nginx實現一個域名配置多個laravel項目的方法示例
- laravel 框架配置404等異常頁面
- Laravel 5.5官方推薦的Nginx配置學習教程
- Laravel Memcached緩存驅動的配置與應用方法分析
- Laravel 5+ .env環境配置文件詳解
