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

赞 (0)

相关推荐

  • laravel config文件配置全局变量的例子

    在laravel中 我们可以使用config()函数来获取bootstrap/cache/config.php中的内容. 使用如下命令,可以config/*下的所有配置文件中的内容保存到bootstrap/cache/config.php中.: php artisan config:cache 然后你可以在config/下新建任何的配置的文件,执行上面命令,然后使用config()函数读取. 调用config(wechatorder.appid).这样我们就可以使用这个变量了. 以上这篇lara

  • 解决laravel资源加载路径设置的问题

    原先我设置的资源路径是这样的: <link rel="stylesheet" href="css/app.css" rel="external nofollow" > 然后我在路由中调用了别的控制器,所以访问的url格式就变成了这样: http://www.laravel4.com/users 然后资源加载的路径href就变成了这样: http://www.laravel4.com/users/css/app.css 这样肯定调用不到

  • laravel框架数据库配置及操作数据库示例

    本文实例讲述了laravel框架数据库配置及操作数据库.分享给大家供大家参考,具体如下: laravel 数据库配置 数据库配置文件为项目根目录下的config/database.php //默认数据库为mysql 'default' => env('DB_CONNECTION', 'mysql'), 'mysql' => [ 'driver' => 'mysql', 'host' => env('DB_HOST', '127.0.0.1'), 'port' => env('

  • 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 --sav

  • Laravel 4 初级教程之视图、命名空间、路由

    Laravel 4 初级教程之视图、命名空间、路由

    1. 视图分离与嵌套 在 learnlaravel 文件夹下运行命令: php artisan generate:view admin._layouts.default 这时候generator插件帮我们创建了app/views/admin/_layouts/default.blade.php 文件,将内容修改为: <!doctype html><html><head>  <meta charset="utf-8">  <title

  • Laravel 4 初级教程之安装及入门

    Laravel 4 初级教程之安装及入门

    0. 默认条件 本文默认你已经有配置完善的PHP+MySQL运行环境,懂得PHP网站运行的基础知识.跟随本教程走完一遍,你将会得到一个基础的包含登录的简单blog系统,并将学会如何使用一些强大的Laravel插件和composer包(Laravel插件也是composer包). 软件版本:PHP 5.4+,MySQL 5.1+ 1. 安装 许多人被拦在了学习Laravel的第一步,安装.并不是因为安装教程有多复杂,而是因为[众所周知的原因].在此我推荐一个composer全量中国镜像:http:

  • 值得分享的最全面Bootstrap快速人门案例

    值得分享的最全面Bootstrap快速人门案例

    今天,我给小白们分享一下比较流行的Bootstrap框架,它在工作中得到许多公司的青睐,因此对于升职和加薪很重要.同时,我们可以快速完成开发任务,减少发开周期,有不对的地方望大家指正. 如果你想走的更远,那么请勤劳一点,多看看代码,多多练习代码,如果你仔细研究代码,自己也可以写出一部分的css比较好的插件. 一.Bootstrap简介 详见官网: http://www.bootcss.com/ http://v3.bootcss.com/ 1.练习准备资源准备: 下载bootstrap资源: h

  • 学做Bootstrap的第一个页面

    学做Bootstrap的第一个页面

    本文实例分享了第一个Bootstrap页面的实现代码,供大家参考,具体内容如下 效果图: 实现代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /><!--为了确保适当的绘制和触屏

  • 使用proxy实现一个更优雅的vue【推荐】

    如果你有读过Vue的源码,或者有了解过Vue的响应原理,那么你一定知道Object.defineProperty(), 那么你也应该知道,Vue 2.x里,是通过 递归 + 遍历 data 对象来实现对数据的监控的, 你可能还会知道,我们使用的时候,直接通过数组的下标给数组设置值,不能实时响应,是因为Object.defineProperty() 无法监控到数组下标的变化,而我们平常所用的数组方法 push , pop , shift , unshift , splice , sort , re

  • vue页面引入three.js实现3d动画场景操作

    vue中安装Three.js 近来无聊顺便研究一些关于3D图形化库.three.js是JavaScript编写的WebGL第三方库.Three.js 是一款运行在浏览器中的 3D 引擎,你可以用它通过控制相机.视角.材质等相关属性来创造大量3D动画场景. 我们开始引入three.js相关插件. 1.首先利用淘宝镜像,操作命令为: cnpm install three 2.接下来利用npm安装轨道控件插件: 关注我的微信公众号[前端基础教程从0开始],加我微信,可以免费为您解答问题.回复"1&qu

  • PHP框架laravel的.env文件配置教程

    前言 大家应该都知道使用laravel框架开发PHP程序的时候,配置框架的.env文件是至关重要的,这个文件上需要配置数据库.数据库用户以及缓存等,下面来一起看看详细的配置教程. 一.配置APP_KEY laravel框架默认在.env配置文件中硬编码了对称加密密钥,开发环境和生产环境不必且应严格禁止使用相同的APP_KEY 在项目中运行php artisan key:generate就会在.env文件中自动生成密钥. APP_KEY=Li0zqXhuxOlnsMtG90UsU*********

  • Laravel接收前端ajax传来的数据的实例代码

    最近有时间把公司的项目整理一下,并把遇到的问题解决了.那么今天也算个学习笔记吧! 最近在做一个笔记的项目,技术栈如下:vue.js + laravel + mongodb 首先不得不感叹vue的神奇,项目昨晚之后我会对整个项目中用到的技术和踩过的坑进行一个总结,今天先记录一个前端传送数据给后端,laravel接收的例子. 前端ajax插件我没有使用vue-resource,说实话,用他遇到了坑,所以使用了axios.js,很好用,而且比vue-resource还小. 来看前端代码(省略vue逻辑

  • 使用 Docker 搭建 Laravel 本地环境的教程详解

    使用 Docker 搭建 Laravel 本地环境的教程详解

    Laravel 官方提供 Homestead 和 Valet 作为本地开发环境,Homestead 是一个官方预封装的 Vagrant Box,也就是一个虚拟机,但是跟 docker 比,它占用体积太大,启动速度慢,同时响应速度很慢,现在有了 docker 这种更好的方式,可以轻松方便的搭建整套 PHP 开发环境. 本文就介绍如何使用 docker 搭建 Laravel 本地环境. 安装 docker 首先安装 docker. 克隆 laradock laradock 官方文档: http://

随机推荐