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 相关文章推荐
删除无限分类并同时删除它下面的所有子分类的方法
Aug 08 PHP
PHP 代码规范小结
Mar 08 PHP
php生成略缩图代码
Jul 16 PHP
php代码书写习惯优化小结
Jun 20 PHP
php var_export与var_dump 输出的不同
Aug 09 PHP
PHP禁止个别IP访问网站
Oct 30 PHP
phpMyAdmin自动登录和取消自动登录的配置方法
May 12 PHP
微信公众平台开发之天气预报功能
Aug 31 PHP
php array_walk 对数组中的每个元素应用用户自定义函数详解
Nov 18 PHP
PHP7新功能总结
Apr 14 PHP
PHP7.3.10编译安装教程
Oct 08 PHP
laravel 实现用户登录注销并限制功能
Oct 24 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不用内置函数对数组排序的两个算法代码
2010/02/08 PHP
微信公众平台开发关注及取消关注事件的方法
2014/12/23 PHP
PHP实用函数分享之去除多余的0
2015/02/06 PHP
MacOS 安装 PHP的图片裁剪扩展Tclip
2015/03/25 PHP
jQuery+PHP发布的内容进行无刷新分页(Fckeditor)
2015/10/22 PHP
php获取当前url地址的方法小结
2017/01/10 PHP
PHP排序算法之希尔排序(Shell Sort)实例分析
2018/04/20 PHP
如何通过PHP实现Des加密算法代码实例
2020/05/09 PHP
JavaScript 打地鼠游戏代码说明
2010/10/12 Javascript
jquery 实现密码框的显示与隐藏示例代码
2013/09/18 Javascript
jquery实现显示已选用户
2014/07/21 Javascript
js实现点击按钮后给Div图层设置随机背景颜色的方法
2015/05/06 Javascript
jquery实现点击弹出带标题栏的弹出层(从右上角飞入)效果
2015/09/19 Javascript
js实现String.Fomat的实例代码
2016/09/02 Javascript
canvas知识总结
2017/01/25 Javascript
详解打造 Vue.js 可复用组件
2017/03/24 Javascript
Vue 中mixin 的用法详解
2018/04/23 Javascript
layui table设置前台过滤转义等方法
2018/08/17 Javascript
JS实现根据详细地址获取经纬度功能示例
2019/04/16 Javascript
VScode格式化ESlint方法(最全最好用方法)
2019/09/10 Javascript
Python 文件读写操作实例详解
2014/03/12 Python
Python判断直线和矩形是否相交的方法
2015/07/14 Python
Python中使用插入排序算法的简单分析与代码示例
2016/05/04 Python
Pyhton中单行和多行注释的使用方法及规范
2016/10/11 Python
windows下python安装小白入门教程
2018/09/18 Python
PyCharm+PySpark远程调试的环境配置的方法
2018/11/29 Python
详解pandas中iloc, loc和ix的区别和联系
2020/03/09 Python
Python Flask框架实现简单加法工具过程解析
2020/06/03 Python
利用canvas实现图片下载功能来实现浏览器兼容问题
2019/05/31 HTML / CSS
世界各地的旅游、观光和活动:Isango!
2019/10/29 全球购物
数据库设计的包括哪两种,请分别进行说明
2016/07/15 面试题
理工大学毕业生自荐信
2013/11/01 职场文书
医学院学生的自我评价分享
2013/11/19 职场文书
青年志愿者先进事迹
2014/05/06 职场文书
中央空调节能方案
2014/06/15 职场文书
PhpSpreadsheet中文文档 | Spreadsheet操作教程实例
2021/04/01 PHP