最近在學(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檔案夾下的資源需要編譯才會(huì)生效
二、各頁面私有資源
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è)參考，也希望大家多多支持腳本之家。
標(biāo)簽：阿克蘇 香港 佳木斯 寶雞 郴州 金華 自貢 通化
巨人網(wǎng)絡(luò)通訊聲明：本文標(biāo)題《Laravel 前端資源配置教程》，本文關(guān)鍵詞 Laravel,前端,資源配置,教程,；如發(fā)現(xiàn)本文內(nèi)容存在版權(quán)問題，煩請?zhí)峁┫嚓P(guān)信息告之我們，我們將及時(shí)溝通與處理。本站內(nèi)容系統(tǒng)采集于網(wǎng)絡(luò)，涉及言論、版權(quán)與本站無關(guān)。
