快捷導(dǎo)航

Laravel 前端資源配置教程

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

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

最近在學(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非所有頁(yè)面共用，建議寫在view(blade)里面，見下段push的方式。
// vue所有頁(yè)面共用，可以在app.js初始/啟用

6. npm編譯

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

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

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

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

<!-- 
 在適當(dāng)位置加入以上兩條語句，建議@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)文章

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