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中的内存管理问题
Aug 31 PHP
使用dump函数,给php加断点测试
Jun 25 PHP
json的键名为数字时的调用方式(示例代码)
Nov 15 PHP
php 获取SWF动画截图示例代码
Feb 10 PHP
基于PHP的简单采集数据入库程序
Jul 30 PHP
PHP统计数值数组中出现频率最多的10个数字的方法
Apr 20 PHP
PHP利用APC模块实现大文件上传进度条的方法
Oct 29 PHP
php验证码的制作思路和实现方法
Nov 12 PHP
Laravel5.* 打印出执行的sql语句的方法
Jul 24 PHP
php删除一个路径下的所有文件夹和文件的方法
Feb 07 PHP
Thinkphp5框架使用validate实现验证功能的方法
Aug 27 PHP
PHP中通过getopt解析GNU C风格命令行选项
Nov 18 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 杂谈《重构-改善既有代码的设计》之五 简化函数调用
2012/05/07 PHP
nginx+thinkphp下解决不支持pathinfo模式
2015/07/01 PHP
jquery不支持toggle()高(新)版本的问题解决
2016/09/24 PHP
PHP实现根据数组的值进行分组的方法
2017/04/20 PHP
让Laravel API永远返回JSON格式响应的方法示例
2018/09/05 PHP
PHP实现获取文件mime类型多种方法解析
2020/05/28 PHP
JavaScript 拾碎[三] 使用className属性
2010/10/16 Javascript
JavaScript fontcolor方法入门实例(按照指定的颜色来显示字符串)
2014/10/17 Javascript
JavaScript通过字典进行字符串翻译转换的方法
2015/03/19 Javascript
JavaScript转换与解析JSON方法实例详解
2015/11/24 Javascript
Bootstrap3.0建站教程(一)之bootstrap表单元素排版
2016/06/01 Javascript
php register_shutdown_function函数详解
2017/07/23 Javascript
基于vue.js路由参数的实例讲解——简单易懂
2017/09/07 Javascript
解决Vue使用mint-ui loadmore实现上拉加载与下拉刷新出现一个页面使用多个上拉加载后冲突问题
2017/11/07 Javascript
vue中如何创建多个ueditor实例教程
2017/11/14 Javascript
微信小程序使用swiper组件实现层叠轮播图
2018/11/04 Javascript
Echarts之悬浮框中的数据排序问题
2018/11/08 Javascript
vue单应用在ios系统中实现微信分享功能操作
2020/09/07 Javascript
windows系统中python使用rar命令压缩多个文件夹示例
2014/05/06 Python
python通过字典dict判断指定键值是否存在的方法
2015/03/21 Python
在Linux下使用Python的matplotlib绘制数据图的教程
2015/06/11 Python
Python数据分析库pandas基本操作方法
2018/04/08 Python
Python切片索引用法示例
2018/05/15 Python
Python 把序列转换为元组的函数tuple方法
2019/06/27 Python
python脚本之一键移动自定格式文件方法实例
2019/09/02 Python
python 实现任务管理清单案例
2020/04/25 Python
详解python方法之绑定方法与非绑定方法
2020/08/17 Python
超级实用的8个Python列表技巧
2020/08/24 Python
Python timeit模块原理及使用方法
2020/10/10 Python
使用HTML5做个画图板的方法介绍
2013/05/03 HTML / CSS
Tom Dixon官网:英国照明及家具设计和制造公司
2019/03/01 全球购物
美国在线纱线商店:Darn Good Yarn
2019/03/20 全球购物
关于廉洁的广播稿
2014/01/30 职场文书
小学教师培训感言
2014/02/11 职场文书
优秀团员主要事迹材料
2015/11/05 职场文书
2019下半年英语教师的教学工作计划(3篇)
2019/09/25 职场文书