脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → PHP编程 → php实例 → Laravel 前端资源配置

Laravel 前端资源配置教程

 更新时间：2019年10月18日 13:47:50   作者：don6105  
今天小编就为大家分享一篇Laravel 前端资源配置教程，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧

最近在学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 前端资源配置教程就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

相关文章

  • Symfony2实现在controller中获取url的方法

    Symfony2实现在controller中获取url的方法

    这篇文章主要介绍了Symfony2实现在controller中获取url的方法,实例分析了Symfony获取URL的常用方法与使用技巧,需要的朋友可以参考下
    2016-03-03
  • ThinkPHP分页实例

    ThinkPHP分页实例

    这篇文章主要介绍了ThinkPHP分页实例,详细讲述了ThinkPHP分页的完整实现步骤,包括模型层、视图层以及样式的代码,需要的朋友可以参考下
    2014-10-10
  • 使用PHP+MySql+Ajax+jQuery实现省市区三级联动功能示例

    使用PHP+MySql+Ajax+jQuery实现省市区三级联动功能示例

    下面小编就为大家带来一篇使用PHP+MySql+Ajax+jQuery实现省市区三级联动功能示例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-09-09
  • PHP实现自动发送邮件功能代码(qq 邮箱)

    PHP实现自动发送邮件功能代码(qq 邮箱)

    本文给大家分享以qq邮箱为例给大家介绍PHP实现自动发送邮件功能代码，感兴趣的朋友参考下吧
    2017-08-08
  • laravel5.6实现数值转换

    laravel5.6实现数值转换

    今天小编就为大家分享一篇laravel5.6实现数值转换，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2019-10-10
  • php array_values 返回数组的值实例详解

    php array_values 返回数组的值实例详解

    php array_values 函数用于返回数组中所有的值，注意该函数将为新数组建立数组索引，原来的文字索引将不存在。本文章向大家讲解array_values函数的基本语法及使用实例,需要的朋友可以参考下
    2016-11-11
  • php workerman定时任务的实现代码

    php workerman定时任务的实现代码

    这篇文章主要介绍了php workerman定时任务的实现代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-12-12
  • laravel 数据迁移与 Eloquent ORM的实现方法

    laravel 数据迁移与 Eloquent ORM的实现方法

    laravel 提供了很实用的 Eloquent ORM 模型类，简单、直观的与数据库进行交互。同时使用数据迁移管理数据库，可以与团队进行共享以及编辑，本文详细的介绍了laravel 数据迁移与 Eloquent ORM的实现方法，感兴趣的可以了解一下
    2019-04-04
  • Yii2.0使用阿里云OSS的SDK上传图片、下载、删除图片示例

    Yii2.0使用阿里云OSS的SDK上传图片、下载、删除图片示例

    本篇文章主要介绍了Yii2.0使用阿里云OSS的SDK上传图片、下载、删除图片示例，具有一定的参考价值，有兴趣的可以了解一下
    2017-09-09
  • PHP实现简单的计算器

    PHP实现简单的计算器

    这篇文章主要为大家详细介绍了PHP实现简单的计算器，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2020-08-08

最新评论