Laravel 前端资源配置教程


Posted in PHP onOctober 18, 2019

最近在学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>内底部(部分JS需要等DOM加载完成方可使用)。
-->

2. 各页面内容模板

@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 前端资源配置教程就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

PHP 相关文章推荐
多文件上传的例子
Oct 09 PHP
手把手教你使用DedeCms V3的在线采集图文教程
Apr 03 PHP
phpmailer发送gmail邮件实例详解
Jun 24 PHP
thinkphp中memcache的用法实例
Nov 29 PHP
一段实用的php验证码函数
May 19 PHP
CI框架实现优化文件上传及多文件上传的方法
Jan 04 PHP
PHP实现电商订单自动确认收货redis队列
May 17 PHP
PHP实现搜索时记住状态的方法示例
May 11 PHP
PHP时间函数使用详解
Mar 21 PHP
Yii 使用intervention/image拓展实现图像处理功能
Jun 22 PHP
php菜单/评论数据递归分级算法的实现方法
Aug 01 PHP
php7 新增功能实例总结
May 25 PHP
tp5 实现列表数据根据状态排序
Oct 18 #PHP
tp5递归 无限级分类详解
Oct 18 #PHP
确保Laravel网站不会被嵌入到其他站点中的方法
Oct 18 #PHP
PHP的Trait机制原理与用法分析
Oct 18 #PHP
tp5修改(实现即点即改)
Oct 18 #PHP
在TP5数据库中四个字段实现无限分类的示例
Oct 18 #PHP
PHP getID3类的使用方法学习笔记【附getID3源码下载】
Oct 18 #PHP
You might like
php版淘宝网查询商品接口代码示例
2014/06/17 PHP
PHP通过反射动态加载第三方类和获得类源码的实例
2015/11/27 PHP
Gird事件机制初级读本
2007/03/10 Javascript
JavaScript Event事件学习第一章 Event介绍
2010/02/07 Javascript
input 输入框内的输入事件详细分析
2010/03/17 Javascript
jQuery实现移动 和 渐变特效的点击事件
2015/02/26 Javascript
JavaScript实现信用卡校验方法
2015/04/07 Javascript
nodejs连接mongodb数据库实现增删改查
2016/12/01 NodeJs
jquery+html仿翻页相册功能
2016/12/20 Javascript
nodejs socket实现的服务端和客户端功能示例
2017/06/02 NodeJs
vue元素实现动画过渡效果
2017/07/01 Javascript
几个你不知道的技巧助你写出更优雅的vue.js代码
2018/06/11 Javascript
Vue实现动态添加或者删除对象和对象数组的操作方法
2018/09/21 Javascript
详解微信小程序获取当前时间及日期的方法
2019/04/28 Javascript
layui实现下拉框三级联动
2019/07/26 Javascript
对Layer UI 模块化的用法详解
2019/09/26 Javascript
[08:56]DOTA2-DPC中国联赛2月23日Recap集锦
2021/03/11 DOTA
在Python中操作时间之strptime()方法的使用
2020/12/30 Python
在Python中使用gRPC的方法示例
2018/08/08 Python
Django使用unittest模块进行单元测试过程解析
2019/08/02 Python
在Pytorch中使用样本权重(sample_weight)的正确方法
2019/08/17 Python
Python递归及尾递归优化操作实例分析
2020/02/01 Python
PyQt5+python3+pycharm开发环境配置教程
2020/03/24 Python
python IDLE添加行号显示教程
2020/04/25 Python
Python基于Twilio及腾讯云实现国际国内短信接口
2020/06/18 Python
pytorch SENet实现案例
2020/06/24 Python
Python绘制组合图的示例
2020/09/18 Python
CSS3 transform的skew属性值图文详解
2014/07/21 HTML / CSS
荷兰照明、灯具和配件网上商店:dmlights
2019/08/25 全球购物
2014法制宣传日活动总结
2014/07/09 职场文书
会计学专业求职信
2014/07/17 职场文书
科学育儿宣传标语
2014/10/08 职场文书
计算机实训报告总结
2014/11/05 职场文书
小学生纪律委员竞选稿
2015/11/19 职场文书
2016八一建军节慰问信
2015/11/30 职场文书
Nginx动静分离配置实现与说明
2022/04/07 Servers