怎么在Laravel中配置前端資源

發(fā)布時(shí)間：2021-05-23 13:09:30 來(lái)源：億速云閱讀：304 作者：Leah 欄目：開(kāi)發(fā)技術(shù)

本篇文章為大家展示了怎么在Laravel中配置前端資源，內(nèi)容簡(jiǎn)明扼要并且容易理解，絕對(duì)能使你眼前一亮，通過(guò)這篇文章的詳細(xì)介紹希望你能有所收獲。

一、前端共用資源的配置

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 是什么

Laravel 是一套簡(jiǎn)潔、優(yōu)雅的PHP Web開(kāi)發(fā)框架。它可以讓你從面條一樣雜亂的代碼中解脫出來(lái)；它可以幫你構(gòu)建一個(gè)完美的網(wǎng)絡(luò)APP，而且每行代碼都可以簡(jiǎn)潔、富于表達(dá)力。

上述內(nèi)容就是怎么在Laravel中配置前端資源，你們學(xué)到知識(shí)或技能了嗎？如果還想學(xué)到更多技能或者豐富自己的知識(shí)儲(chǔ)備，歡迎關(guān)注億速云行業(yè)資訊頻道。

向AI問(wèn)一下細(xì)節(jié)

怎么在Laravel中配置前端資源

Laravel 是什么

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽