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 相关文章推荐
PHP学习之数组值的操作
Apr 17 PHP
jQuery+php实现ajax文件即时上传的详解
Jun 17 PHP
php+js iframe实现上传头像界面无跳转
Apr 29 PHP
ThinkPHP登录功能的实现方法
Aug 20 PHP
PHP读书笔记_运算符详解
Jul 01 PHP
php使用Jpgraph创建折线图效果示例
Feb 15 PHP
PHP 访问数据库配置通用方法(json)
May 20 PHP
thinkphp5.1 文件引入路径问题及注意事项
Jun 13 PHP
PHP封装的mysqli数据库操作类示例
Feb 16 PHP
PHP中单例模式的使用场景与使用方法讲解
Mar 18 PHP
针对PHP开发安全问题的相关总结
Mar 22 PHP
PHP配置文件php.ini中打开错误报告的设置方法
Jan 09 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面向对象全攻略 (八)重载新的方法
2009/09/30 PHP
PHP中register_globals参数为OFF和ON的区别(register_globals 使用详解)
2012/02/05 PHP
使用php发送有附件的电子邮件-(PHPMailer使用的实例分析)
2013/04/26 PHP
php从数据库查询结果生成树形列表的方法
2015/04/17 PHP
jquery 图片预加载 自动等比例缩放插件
2008/12/25 Javascript
jQuery AjaxQueue改进步骤
2011/10/06 Javascript
上传的js验证(图片/文件的扩展名)
2013/04/25 Javascript
利用jQuery实现漂亮的圆形进度条倒计时插件
2015/09/30 Javascript
js倒计时简单实现代码
2016/08/11 Javascript
JavaScript中String对象的方法介绍
2017/01/04 Javascript
如何用JS/HTML将时间戳转换为“xx天前”的形式
2017/02/06 Javascript
JS作用域链详解
2017/06/26 Javascript
浅谈在fetch方法中添加header后遇到的预检请求问题
2017/08/31 Javascript
javascript实现QQ空间相册展示源码
2017/12/12 Javascript
JavaScript基础心法 深浅拷贝(浅拷贝和深拷贝)
2018/03/05 Javascript
vue 实现超长文本截取,悬浮框提示
2020/07/29 Javascript
python模拟登陆Tom邮箱示例分享
2014/01/13 Python
学习python之编写简单简单连接数据库并执行查询操作
2016/02/27 Python
python 实现在Excel末尾增加新行
2018/05/02 Python
Flask之flask-script模块使用
2018/07/26 Python
Python使用Shelve保存对象方法总结
2019/01/28 Python
python 利用文件锁单例执行脚本的方法
2019/02/19 Python
python简单实现矩阵的乘,加,转置和逆运算示例
2019/07/10 Python
用python解压分析jar包实例
2020/01/16 Python
Python递归求出列表(包括列表中的子列表)的最大值实例
2020/02/27 Python
HTML5 本地存储之如果没有数据库究竟会怎样
2013/04/25 HTML / CSS
Staples加拿大官方网站:办公用品一站式采购
2016/09/25 全球购物
什么是Web Service?
2012/07/25 面试题
外语系毕业生自荐信范文
2013/12/16 职场文书
国家励志奖学金获奖感言
2014/01/09 职场文书
中班幼儿评语大全
2014/04/30 职场文书
美丽家庭事迹材料
2014/05/03 职场文书
物理分数没达标检讨书
2014/09/13 职场文书
中共广东省委常委会党的群众路线教育实践活动整改方案
2014/09/23 职场文书
Spring Boot两种全局配置和两种注解的操作方法
2021/06/29 Java/Android
Android基础入门之dataBinding的简单使用教程
2022/06/21 Java/Android