美文网首页laravel
vue+laravel终极混合开发模式部署

vue+laravel终极混合开发模式部署

作者: Hansuku | 来源:发表于2018-01-14 18:16 被阅读296次

这几天终于开始捣腾SPA了,其实vue+laravel是可以做前后端分离的,只是我们一个大项目里包裹了两个小项目,现在还是混合开发,但是配置上来说走了蛮多坑,这里也分享一下.友情提醒这篇文章只适合使用过vue的旁友!!!

本身在之前我们一直是用laravel视图做不需要交互的数据绑定,而laravel5.4版本自带vue,所以如果你们也是这样开发的,你们的项目里应该会有个这玩意

没错!!!打开它,你会看到laravel已经给配置了vue的环境

你只要在项目目录`npm install --save-dev`就可以把这些环境都装下来

然后,接下来是重头戏,很多刚刚前后端分离的人也会搞混,网上也很少有资料

敲黑板请前端同学记住,vue+laravel模式,是后台只给一个blade.php模板文件,剩下的,全都自己在resources/assets/js下面写!包括路由!js,sass等等!

来一张结构图

然后!关键的来了,我们写的东西怎么引用到blade.php模板引擎上去?

打开你的终端!到项目目录,`npm run dev`

如果你没有配错路由写错语法等等自己写错的情况,现在会用laravel-mix帮你在项目根目录/public/js/下生成app.js

然后我们到blade.php上引用刚刚生成的app.js即可!

laravel-mix是啥?这就是一个超级无敌缩减版的webpack,具体可以看官方github:laravel-mix

目前这种工作方式对于直接用ftp在服务器上写代码的同学不是很友好,因为你改完一个vue文件laravel-mix可以自动打包,但是app.js需要你手动ftp上传..如果在本地有docker环境的同学!!恭喜你,你找到了前端敲代码怎么爽怎么来的方法

相关文章

  • vue+laravel终极混合开发模式部署

    这几天终于开始捣腾SPA了,其实vue+laravel是可以做前后端分离的,只是我们一个大项目里包裹了两个小项目,...

  • RestCloud混合集成平台,私有化部署模式

    RestCloud混合集成平台主要采用私有化部署方式,可以部署在公有云、私有云,也可以使用混合云部署模式,为目前大...

  • 移动开发技术选型

    1、小程序验证原型商业模式 2、Hybrid app 混合开发 3、react native 混合开发

  • 混合开发

    来源于:IOS-Hybrid(混合开发) 那些设计思想及逻辑部署

  • 混合开发H5通信方案

    现在,混合开发是APP的主流开发模式——NATIVE+H5。金科支持的各site也是采取同样的做法。混合开发的优点...

  • APP混合模式开发方案

    一:混合开发模式的背景 APP的三种开发模式:Native App、 Web App、Hybrid App。 1....

  • 混合开发模式介绍

    1. 开发模式介绍 利用原生+h5模式开发app也有一段时间了,写篇文章来介绍一下现在的开发模式。个人是目前团队中...

  • 混合开发Hybrid,JSBridge原理简述

    混合开发(Hybrid),是一种开发模式,指使用多种开发模型开发App。一般有两大模式:原生Native、Web ...

  • 原生APP开发-优缺点对比调研

    一、 目前主流的开发模式 引言内容 1、原生开发(Native) 2、混合开发(Hybrid) 3、WebAPP(...

  • Flutter混合工程管理

    Flutter混合工程管理的两种模式 混合模式 将Flutter部分代码作为一个module引入,该方案开发体验好...

网友评论

    本文标题:vue+laravel终极混合开发模式部署

    本文链接:https://www.haomeiwen.com/subject/wmxloxtx.html