Laravel 前端資源配置教程

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

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

最近在學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>內(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)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

Symfony2實現(xiàn)在controller中獲取url的方法
這篇文章主要介紹了Symfony2實現(xiàn)在controller中獲取url的方法,實例分析了Symfony獲取URL的常用方法與使用技巧,需要的朋友可以參考下
2016-03-03
ThinkPHP分頁實例
這篇文章主要介紹了ThinkPHP分頁實例,詳細講述了ThinkPHP分頁的完整實現(xiàn)步驟,包括模型層、視圖層以及樣式的代碼,需要的朋友可以參考下
2014-10-10
使用PHP+MySql+Ajax+jQuery實現(xiàn)省市區(qū)三級聯(lián)動功能示例
下面小編就為大家?guī)硪黄褂肞HP+MySql+Ajax+jQuery實現(xiàn)省市區(qū)三級聯(lián)動功能示例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-09-09
PHP實現(xiàn)自動發(fā)送郵件功能代碼(qq 郵箱)
本文給大家分享以qq郵箱為例給大家介紹PHP實現(xiàn)自動發(fā)送郵件功能代碼，感興趣的朋友參考下吧
2017-08-08
laravel5.6實現(xiàn)數(shù)值轉(zhuǎn)換
今天小編就為大家分享一篇laravel5.6實現(xiàn)數(shù)值轉(zhuǎn)換，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2019-10-10
php array_values 返回數(shù)組的值實例詳解
php array_values 函數(shù)用于返回數(shù)組中所有的值，注意該函數(shù)將為新數(shù)組建立數(shù)組索引，原來的文字索引將不存在。本文章向大家講解array_values函數(shù)的基本語法及使用實例,需要的朋友可以參考下
2016-11-11
php workerman定時任務的實現(xiàn)代碼
這篇文章主要介紹了php workerman定時任務的實現(xiàn)代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-12-12
laravel 數(shù)據(jù)遷移與 Eloquent ORM的實現(xiàn)方法
laravel 提供了很實用的 Eloquent ORM 模型類，簡單、直觀的與數(shù)據(jù)庫進行交互。同時使用數(shù)據(jù)遷移管理數(shù)據(jù)庫，可以與團隊進行共享以及編輯，本文詳細的介紹了laravel 數(shù)據(jù)遷移與 Eloquent ORM的實現(xiàn)方法，感興趣的可以了解一下
2019-04-04
Yii2.0使用阿里云OSS的SDK上傳圖片、下載、刪除圖片示例
本篇文章主要介紹了Yii2.0使用阿里云OSS的SDK上傳圖片、下載、刪除圖片示例，具有一定的參考價值，有興趣的可以了解一下
2017-09-09
PHP實現(xiàn)簡單的計算器
這篇文章主要為大家詳細介紹了PHP實現(xiàn)簡單的計算器，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2020-08-08