最近在學(xué)Laravel，遇到前端資源加載的問題，記錄一下。
一、前端共用資源的配置
1. webpack.mix.js
//一般不太更動(dòng)，透過以下兩個(gè)檔案講所需資源加載。
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. 共用標(biāo)題模板
@stack('styles')
@stack('scripts')
!--
在適當(dāng)位置加入以上兩條語句，建議@stack('styles'放在head>中，
@stack('scripts')放在body>內(nèi)底部(部分JS需要等DOM加載完成方可使用)。
-->
2. 各頁面內(nèi)容模板
@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 前端資源配置教程就是小編分享給大家的全部內(nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
您可能感興趣的文章:- Laravel如何友好的修改.env配置文件詳解
- Nginx中運(yùn)行PHP框架Laravel的配置文件分享
- Laravel框架環(huán)境與配置操作實(shí)例分析
- laravel config文件配置全局變量的例子
- Laravel數(shù)據(jù)庫讀寫分離配置的方法
- Laravel 數(shù)據(jù)庫加密及數(shù)據(jù)庫表前綴配置方法
- laravel框架數(shù)據(jù)庫配置及操作數(shù)據(jù)庫示例
- laravel-admin自動(dòng)生成模塊,及相關(guān)基礎(chǔ)配置方法
- laravel 配置路由 api和web定義的路由的區(qū)別詳解
- Laravel5.6框架使用CKEditor5相關(guān)配置詳解
- Laravel配置全局公共函數(shù)的方法步驟
- Laravel5框架自定義錯(cuò)誤頁面配置操作示例
- laravel配置Redis多個(gè)庫的實(shí)現(xiàn)方法
- nginx實(shí)現(xiàn)一個(gè)域名配置多個(gè)laravel項(xiàng)目的方法示例
- laravel 框架配置404等異常頁面
- Laravel 5.5官方推薦的Nginx配置學(xué)習(xí)教程
- Laravel Memcached緩存驅(qū)動(dòng)的配置與應(yīng)用方法分析
- Laravel 5+ .env環(huán)境配置文件詳解
