laravel 使用 vue (gulp)
1)首先要安装 gulp
看这里 http://www.cnblogs.com/tujia/p/6397779.html
2)编辑js
默认 laravel 里有一个 /resources/assets/js/app.js 这个 gulp 要编译文件,gulp 将 /resources/assets/js/app.js 编译成 /public/js/app.js 文件,/public/js/app.js 在公共底部被引用
虽然 /resources/assets/js 里只有一个 app.js,但不代表你只能写一个 js,你可以写自己的js,再用 larave-exlixir 工具合并成一个 js
elixir(function(mix) {
mix.scripts([
'order.js',
'forum.js'
]);
});
PS:默认保存在 /public/js/all.js 里,当然也可以自己改保存路径
elixir(function(mix) {
mix.scripts(['app.js', 'controllers.js'], 'public/js/app.js')
.scripts(['forum.js', 'threads.js'], 'public/js/forum.js');
});
如果你还想懒一点,可以直接给一个js目录就可以打包了(默认保存在 /public/js/all.js 里)
elixir(function(mix) {
mix.scriptsIn('public/js/some/directory');
});
3)应用 js
终端运行 gulp 命令就可以编译打包 js 了
gulp
如果你想压缩 js,可以加上 --product 参数
gulp --product
4)debug 模型
在开发阶段,如果你觉得每次修改后都要执行 gulp 命令比较麻烦,那你可以使用下面这个侦听命令
gulp watch
它会侦听项目里的文件变化,如果文件发生的修改就会自动编译了,不需要重复执行 gulp 命令
5)温馨提示
laravel 公共模版里引用 app.js 没加版本号,app.js 会被浏览器缓存了,所以有时候你刷新可能会看不到变化,你可以加一个时间戳(测试的时候,正式环境建议在后台加一个“版本号”配置)
<script src="/js/app.js?{{rand()}}"></script>
<script src="/js/app.js?{{$app_version}}"></script>
完
laravel 使用 vue (gulp)的更多相关文章
- 基于 Laravel、Vue.js开发的全新社交系统----ThinkSNS+
什么是ThinkSNS+ ThinkSNS(简称TS)始于2008年,一款全平台综合性社交系统,为国内外大中小企业和创业者提供社会化软件研发及技术解决方案,目前最新版本为ThinkSNS+.新的产品名 ...
- 使用Laravel 和 Vue 构建一个简单的SPA
本教程是作者自己在学习Laravel和Vue时的一些总结,有问题欢迎指正. Laravel是PHP的一个框架,Vue是前端页面的框架,这两个框架如何结合起来构建一个SPA(Single Page Ap ...
- 通过Laravel 初识Vue.js
最近也在学习laravel的框, 因为之前学过tp框架, 都说laravel是最优雅的框架,所以开学后忍不住去试试这个在国外已经火的不要不要的框架. 总的来说,对于学习完tp框架后,我觉得tp毕竟是中 ...
- laravel整合vue 多入口解决
2018年8月10日23:10:29 其实整合是挺简单,因为laravel本身就准备的挺好了 laravel 版本5.6 注意php cli是web是不一样的 这个需要设置环境变量 ,php需要7 ...
- iBrand 开源电商小程序 (Laravel API+ webpack + gulp + 原生小程序)
iBrand 社交电商产品正式进入开源过程中了,我们制定了详细的开源计划,目前已经发布了 V1 的版本,后续的版本也在陆续整理完善中. 各个版本功能明细如下图: 3 个版本计划在今年春节前全部完成,可 ...
- laravel5.4+vue+element简单搭建(gulp+laravel Elixir)(转)
如今laravel来到5.4版本,更方便引入vue了,具体步骤如下: 下图为我动到的文件 1.下载laravel5.4 2.命令行(laravel5.4目录下):composer install 3. ...
- 使用ES6+Vue+webpack+gulp构建新一代Web应用
1.推荐学习网站:Vue.js中国 2.Demo环境搭建: 2.1环境配置 安装nodejs环境,具体内容可以百度: 新建一个文件夹: mkdir VUE-ES6-WebPack 全局安装gulp: ...
- Vue.js的库,包,资源的列表大全。
官方资源 外部资源 社区 播客 官方示例 入门 开发工具 语法高亮 代码片段 自动补全 组件集合 库和插件 路由 ajax/数据 状态管理 校验 UI组件 i18n 示例 模板 脚手架 整合 插件/指 ...
- Vue, React, AngularJS, Angular2 我们对流行JavaScript框架们的选择
转自<奇舞周刊>,好文章mark一下 分割线 一个有趣的事实是:IBM发表的2017年最值得学习的编程语言名单中,JavaScript榜上有名.这位IT巨头指出,JS在网站中惊人地达到94 ...
随机推荐
- 又谈C++指针(1)
写在前面的话:虽然这段代码中对于指针的使用是不正确的,但是我却在这个不正确的代码中发现了另一个错误,而且深感迷惑,所以打算将此博文推到首页,请各位帮忙回答个问题. 在项目中用到了以下一段代码,执行结果 ...
- 字符设备驱动笔记——中断方式按键驱动之linux异常处理结构(四)
.中断方式获取按键值 单片机: )按键按下 )cup发生中断,跳转到异常向量入口执行 )b 函数 a.保存被中断的现场 b.执行中断处理函数 c.恢复 linux: )trap_init()函数构造异 ...
- J2EE的13个规范总结
转载自:http://blog.csdn.net/zhuanzhe117/article/details/38763483 什么是J2EE? 在企业级应用中,都有一些通用企业需求模块,如数据库连接,邮 ...
- docker探索-Win10 Docker 安装使用(一)
本文转自:http://blog.csdn.net/shi1451042748/article/details/52996046 1.前言 Docker最近推出了可以运行在Win10稳定版本,让我们赶 ...
- 【Unity笔记】UGUI物体的渲染顺序
①不同Camera的Depth.(大在前,小在后)②同Camera的SortingLayer.(下在前,上在后)③同SortingLayer下的Order in Layer.(大在前,小在后)④同Or ...
- R语言实战实现基于用户的简单的推荐系统(数量较少)
R语言实战实现基于用户的简单的推荐系统(数量较少) a<-c(1,1,1,1,2,2,2,2,3,3,3,4,4,4,5,5,5,5,6,6,7,7) b<-c(1,2,3,4,2,3,4 ...
- 訪问站点时仅仅是显示主页(index.jsp),没有请求连接数据库读取数据。
两部曲: 1:在你的web.xml中的Struts2的核心过滤器的映射中添加 <filter-mapping> <dispatcher>REQUEST</disp ...
- link_to和其对应要跳转的的url,用path和直接路由方法
link_to和其对应要跳转的的url,用path和直接路由方法 看看link_to <% @order.each do |oo| %> <div> <%= oo.nam ...
- wex5中集成的mysql数据库 打开时一闪而过 报错
在进程中kill mysql.exe 重新启动即可
- MFC 窗体样式修改
窗体创建之后,如何设置窗体的样式呢? 一般情况下使用GetWindowLongW与SetWindowLongW即可实现窗体样式的修改或者使用ModifyStyle. 关于MFC存在GetWindowL ...