首先表示折腾了十来天的php-laravel框架和vue的结合开发又偏前端实在是太大的阻碍,首先laravel的机制就是写完路由router再加载blade模板的.如果要在laravel工程里面加载一个.vue文件,必须通过一个 blade模板再导入vue.js.

  近期接触了前端较前卫的思想,那就是压缩打包代码+组件化开发.

这种思路就由不得传统的html的前端静态代码的,传统的静态项目的代码是这样的:


而这样子很不利与组件化开发, 换言之就是改动了一处,需要凭记忆+个人能力+注释清楚来修改其他文件(如果改的不只是一处的话,那对于维护web的程序员来讲简直是噩梦)

于是前端有个很厉害的东西叫:脚手架,在vue里就是vue cli

这玩意只要一句init的命令行就能生成一堆项目的文件,开发起来相当方便


用的webpack,就输入

npm build dev   一句话就能:

压缩打包编译丢给服务器就能上线了你信不信

那为什么还要依赖这个laravel呢?

那真的是因为laravel这个特殊的机制了:必须编写路由+模板!  必须编写路由+模板!  必须编写路由+模板! 

那如果在laravel工程下开发前端,那真是的死了算了

每一次写完代码要用gulp watch 来动态编译然后打包(别以为我不知道,打包出来的最后的东东就是js的eval(代码处))

加上apache缓存/laravel缓存服务/浏览器缓存/

往往你get到的 只是你改代码的上一次的请求  我想说,这样的开发,我!不!要!



再说说解决开发时的老大难的问题:跨域;

在这方面前端是怎么做到完全脱离后台的呢,

解决方法是:用在本地开启服务器请求代理的方式来跟远端服务器通讯;

据说:服务器之间的通讯是不需要跨域的

神器来了:http-proxy-middleware! ==>一个node开发的代理发出http请求的中间件

神器自行百度!

----------------------------------------------------------------------------------------------------------------------------------------------------------


前端开发完全分离总结:

1:一个优秀的组件化开发框架(非必须),如vue 理由:自动生成工程目录+实时编译+打包压缩+es6语法检查+stylus解析+自动化单元测试工具kram(咋写忘了)+etc..

2:一个优秀的跨域解决方案,如vue cli-proxyTable(基于http-proxy-middleware)

3:一个走过弯路(碰过后端代码甚至想改后端代码)然后开发思路才变得很清晰的前端程序员!

Vue.js 与 Laravel 分离的更多相关文章

  1. 【laravel5.4+vue.js】laravel 循环三维数组,解决:htmlentities() expects parameter 1 to be string, array given

    laravel循环三维数组   +++   vue.js循环三维数组  (数据均是以三维数组形式存在的) <form-item label="权限名称" prop=" ...

  2. python django框架+vue.js前后端分离

    本文用于学习django+vue.js实现web前后端分离协作开发.以一个添加和删除数据库书籍应用为实例. django框架官方地址:https://www.djangoproject.com/ vu ...

  3. 全宇宙首个.NET5+Vue.js前后端分离以及业务模块化快速开发框架【NetModular】发布~

    最近.Net圈子很热闹啊,我也来凑凑,今天中午耗时长达半小时,把NetModular升级到了.NET5,详情查看分支https://github.com/iamoldli/NetModular/tre ...

  4. springcloud Springboot vue.js Activiti6 前后分离 跨域 工作流 集成代码生成器 shiro权限

    1.代码生成器: [正反双向](单表.主表.明细表.树形表,快速开发利器)freemaker模版技术 ,0个代码不用写,生成完整的一个模块,带页面.建表sql脚本.处理类.service等完整模块2. ...

  5. Tornado + vue.js 前后端分离运行脚本

    shell脚本部分: #!/bin/bash 主脚本 (./cem-demo_publish_front) (./cem-demo_publish_backend) #!/bin/bash 后端脚本 ...

  6. 腾讯云部署golang flow流程,vue.js+nginx+mysql+node.js

    这次总算把js-ojus/flow的ui部署到腾讯云上,比较吐槽的就是,为啥这么复杂,vue.js前后端分离,比golang编写的部署方面复杂几万倍.真是浪费人生啊. golang+sqlite写的东 ...

  7. 通过Laravel 初识Vue.js

    最近也在学习laravel的框, 因为之前学过tp框架, 都说laravel是最优雅的框架,所以开学后忍不住去试试这个在国外已经火的不要不要的框架. 总的来说,对于学习完tp框架后,我觉得tp毕竟是中 ...

  8. vue.js+UEditor集成 [前后端分离项目]

    首先,谈下这篇文章中的前后端所涉及到的技术框架内容. 虽然是后端的管理项目,但整体项目,是采用前后端分离的方式完成,这样做的目的也是产品化的需求: 前端,vue+vuex+vue router+web ...

  9. 基于 Laravel、Vue.js开发的全新社交系统----ThinkSNS+

    什么是ThinkSNS+ ThinkSNS(简称TS)始于2008年,一款全平台综合性社交系统,为国内外大中小企业和创业者提供社会化软件研发及技术解决方案,目前最新版本为ThinkSNS+.新的产品名 ...

随机推荐

  1. python3中的mysql数据库操作

    软硬件环境 OS X EI Capitan Python 3.5.1 mysql 5.6 前言 在开发中经常涉及到数据库的使用,而python对于数据库也有多种解决方法.本文以python3中的mys ...

  2. 编码风格和PEP8规范

    编码风格 错误认知 这很浪费时间 我是个艺术家 所有人都能穿的鞋不会合任何人的脚 我善长制定编码规范 正确认知 促进团队合作 减少bug处理 提高可读性,降低维护成本 有助于代码审查 养成习惯,有助于 ...

  3. 我对if(!this.IsPostBack)的理解

    if(!this.IsPostBack) { } 通常用在page_load中,获取一个值,该值指示该页是否正为响应客户端回发而加载,或者它是否正被首次加载和访问,如果是为响应客户端回发而加载该页,则 ...

  4. scheduling.quartz.CronTriggerBean has interface org.quartz.CronTrigger as super class

    转自:https://blog.csdn.net/lzj0470/article/details/17786587 quartz版本号:2.1.7 错误: Caused by: <a href= ...

  5. Delphi RAD Berlin OutputDebugString 输出调试信息

    Delphi RAD Berlin Event Log.OutputDebugString 输出调试信息,仅在win VCL下可以用.OutputDebugString(PChar('hellowor ...

  6. Apache相关安全设置

    刚刚安装完Apache2.2和php 5.2.14后,配置完成首次用httpd启动时出现Apache 2 Test Page,并有如下提示:     此问题的解决办法是: 1. 找到一个叫做welco ...

  7. JavaScript eval_r() 函数

    定义和用法 eval_r() 函数可计算某个字符串,并执行其中的的 JavaScript 代码. 语法 eval_r(string) 参数 描述 string 必需.要计算的字符串,其中含有要计算的  ...

  8. Unknown column in 'field list'

    好久都没有亲手写数据库的连接以及操作了,近期一直都是用ejb,直接就映射到数据库了,所以关于jdbc的知识都忘得差不多了.不过吧,为了学习struts2,还是重新将jdbc知识捡起来.找了一上午的错误 ...

  9. hive sql 随机抽样

    create table daizk.IOS_matrix_sex asselect *from zhujx.1029_IOS_features_replce_nullwhere sex = 'M'u ...

  10. XtraBackup 备份原理

    来着淘宝技术: http://mysql.taobao.org/monthly/2016/03/07/ https://github.com/alibaba/AliSQL 前言 Percona Xtr ...