怎么在Laravel中配置前端资源

　　介绍

本篇文章为大家展示了怎么在Laravel中配置前端资源,内容简明扼要并且容易理解,绝对能使你眼前一亮,通过这篇文章的详细介绍希望你能有所收获。

<强>一、前端共用资源的配置

<强> 1。webpack.mix。js

//一般不太更动,透过以下两个档案讲所需资源加载。 　　 　　mix.js(& # 39;资源/资产/js/app.js& # 39;,, & # 39;公共/js # 39;) 　　,.sass(& # 39;资源/资产/sass/app.scss& # 39;,, & # 39;公共/css # 39;);

<强> 2。npm命令安装前端套件资源(以jquery ui为例)

npm  install  jquery-ui ——save-dev 　　,//猻ave-dev 为加入到package.json: devdependencies中

<强> 3。配置JS资源

//,/资产/JS/app.js资源 　　try  { 　　窗口。美元,=,window.jQuery =,要求(& # 39;jquery # 39;); 　　,要求(& # 39;bootstrap-sass& # 39;);=,window.datepicker 要求(& # 39;jquery-ui& # 39;); 　　,//或,import  & # 39; jquery ui/ui/widget/datepicker.js& # 39;; 　　,//add  as  many  widget  as 你may 需要 　　,//路径到node_modules/jquery ui…去找 　　},catch  (e), {,}

<强> 4。配置CSS资源

//,/资产/资源/app.scss顶嘴 　　@import  & # 39; ~ jquery ui/主题/基地/all.css& # 39;;/*,路径到node_modules/jquery ui…去找,*/

<强> 5。初始/启用套件模组

//,/资产/js/app.js资源 　　美元(& # 39;.datepicker& # 39;) .datepicker ();//,e.g  & lt; input 类型=皌ext",类=癲atepicker",/比;//,此例之datepicker仅示范,datepicker非所有页面共用,建议写在视图(叶片)里面,见下段推的方式。//,vue所有页面共用,可以在app.js初始/启用

<强> 6。npm编译

npm  run 开发 　　#资源档案夹下的资源需要编译才会生效

<强>二,各页面私有资源

<强> 1。共用标题模板

@stack(& # 39;风格# 39;) 　　@stack(& # 39;脚本# 39;) 　　 　　& lt; !,, 　　,在适当位置加入以上两条语句,建议@stack(& # 39;风格# 39;放在& lt; head>中, 　　,@stack(& # 39;脚本# 39;)放在& lt; body>内底部(部分JS需要等DOM加载完成方可使用)。 　　——在

<强> 2。各页面内容模板

@push(& # 39;风格# 39;) 　　,& lt; link  rel=皊tylesheet" https://www.yisu.com/zixun/, href="{{资产(Path_to_CSS)}}“rel="外部nofollow”> 　　@endpush 　　 　　@push(脚本)