快捷導(dǎo)航

Laravel 前端資源配置教程

更新時(shí)間：2019年10月18日 13:47:50 作者：don6105

今天小編就為大家分享一篇Laravel 前端資源配置教程，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧

最近在學(xué)Laravel，遇到前端資源加載的問(wèn)題，記錄一下。

一、前端共用資源的配置

1. webpack.mix.js

//一般不太更動(dòng)，透過(guò)以下兩個(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非所有頁(yè)面共用，建議寫(xiě)在view(blade)里面，見(jiàn)下段push的方式。
// vue所有頁(yè)面共用，可以在app.js初始/啟用

6. npm編譯

npm run dev
#resource檔案夾下的資源需要編譯才會(huì)生效

二、各頁(yè)面私有資源

1. 共用標(biāo)題模板

@stack('styles')
@stack('scripts')

<!-- 
 在適當(dāng)位置加入以上兩條語(yǔ)句，建議@stack('styles'放在<head>中，
 @stack('scripts')放在<body>內(nèi)底部(部分JS需要等DOM加載完成方可使用)。
-->

2. 各頁(yè)面內(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 前端資源配置教程就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

PHP代碼判斷設(shè)備是手機(jī)還是平板電腦(兩種方法)
隨著互聯(lián)網(wǎng)移動(dòng)設(shè)備的普及，很多網(wǎng)站都兼容手機(jī)端瀏覽，為了更好的讓網(wǎng)頁(yè)在手機(jī)端顯示，我們都選擇了使用CSS媒體查詢制作響應(yīng)式模版。本文給大家介紹PHP代碼判斷設(shè)備是手機(jī)還是平板電腦(兩種方法)，感興趣的朋友一起學(xué)習(xí)吧
2015-10-10
PHP查看當(dāng)前變量類型的方法
這篇文章主要介紹了PHP查看當(dāng)前變量類型的方法,需要的朋友可以參考下
2015-07-07
yii2.0整合阿里云oss的示例代碼
本篇文章主要介紹了yii2.0整合阿里云oss的示例代碼，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2017-09-09
Yii2.0框架模型多表關(guān)聯(lián)查詢示例
這篇文章主要介紹了Yii2.0框架模型多表關(guān)聯(lián)查詢,結(jié)合實(shí)例形式總結(jié)分析了Yii2.0框架多表關(guān)聯(lián)查詢相關(guān)操作技巧,需要的朋友可以參考下
2019-07-07
ThinkPHP中create()方法自動(dòng)驗(yàn)證實(shí)例
下面小編就為大家?guī)?lái)一篇ThinkPHP中create()方法自動(dòng)驗(yàn)證實(shí)例。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2017-04-04
thinkPHP內(nèi)置字符串截取函數(shù)用法詳解
這篇文章主要介紹了thinkPHP內(nèi)置字符串截取函數(shù)用法,結(jié)合實(shí)例形式分析了thinkPHP內(nèi)置的字符串截取函數(shù)功能與具體使用方法,以及針對(duì)無(wú)法添加省略號(hào)的源碼修改技巧,需要的朋友可以參考下
2016-11-11
注意!PHP 7中不要做的10件事
這篇文章主要為大家詳細(xì)介紹了PHP 7中不要做的10件事,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2016-09-09
解決laravel id非自增模型取回為0 的問(wèn)題
今天小編就為大家分享一篇解決laravel id非自增模型取回為0 的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2019-10-10
簡(jiǎn)單PHP會(huì)話(session)說(shuō)明介紹
下面小編就為大家?guī)?lái)一篇簡(jiǎn)單PHP會(huì)話(session)說(shuō)明介紹。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2016-08-08
php生成唯一uid的解決方法詳解
在用戶系統(tǒng)中，生成唯一uid，是很多初級(jí)程序員頭痛的事情，因?yàn)槟悴⒉荒鼙ＷC完全的唯一性，如果要保證唯一性，必須要查一次數(shù)據(jù)庫(kù)。本文將介紹php生成唯一uid的思路，希望能對(duì)大家有所幫助
2021-11-11