如何利用vue和php作先后端分离开发？

时间 2019-11-09

标签如何利用 vue php 后端分离开发栏目 PHP 繁體版

原文原文链接

新手上路，前端工程师，刚毕业参加工做两个月，上面让我用vue搭建环境和php工程师一块儿开发，作先后端分离，然而我只用过简单的vue作一些小组件的经验，彻底不知道怎样和php工程师配合，ps： php那边用的是think5 ，我要如何把vue嵌套进去？我这两天查资料加学习发现vue-cli有它本身的逻辑目录，如今整我的很懵逼，可能对于一些有个三五年经验的工程师来讲，之只是一个小问题，可是困扰了我很久，最后总结一下问题，1.如何用vue搭建环境和php工程师作先后端分离开发，2能搭建一个给我看看么！

之前是写PHP的，转前端两年了吧～之前写Laravel比较多，前后在百度、大疆实习，总结一下，不知道对你有没有帮助。

Blade下的Vue

包括Laravel在内的主流PHP框架都是MVC架构的，在视图层一般都有本身的模板引擎。因此在大一入门的时候我通常是这样写的。php

编写一个Laravel的模板文件，传进来PHP的变量并渲染。css

<html>
    <body>
        <h1>{{ $hello }}</h1>
    </body>
</html>

经过script标签引入Vue，而后在标签内写vue的逻辑。html

<script src="js/vue.min.js"></script>

配合axios这些ajax库，前端就能够只写在resources/views文件夹里，不用管其余的了。前端

构建工具下的Vue

后来以为没有NPM和Node实在太不方便了，因而单独创建了前端页面的文件夹，编译到resources/views文件夹里，不过不久以后Laravel就提供了一体化的构建工具。vue

Laravel Mix提供了一个管道，能够流式编译CSS和JS。react

mix.js('resources/assets/js/app.js', 'public/js')
   .sass('resources/assets/sass/app.scss', 'public/css');

相似于Gulp，也是在Node上面跑起来的。webpack

npm install
npm run dev
npm run production

在app.js里面注册组件。ios

// app.js
Vue.component('example', require('./components/Example.vue'));

而后就能够直接写在PHP的模板里面了。web

@extends('layouts.app')

@section('content')
    <example></example> // 这里是使用vue组件的
@endsection

其实原理仍是和以前手动编译的同样，先经过webpack翻译组件，生成正常的PHP模板，给PHP调用。ajax

分离与转发

再后来，前端和后端项目在一台服务器，一个文件夹里，太窝囊了，也不利于扩展。所以，你们开始使用Node转发。

这里后端的工做通常是：

编写Lumen代码，提供服务
写好Restful的API文档
用postman进行测试

前端的工做通常是：

编写Vue代码
打包编译
使用Node转发API请求，解决跨域问题
使用PM2处理并发请求

结束

如今写JS比较多了，发现中间层用Koa、express也不错，因此很久都没有用PHP了。如今工做中大部分都是CMS的业务，后端JAVA比较多，前端就直接转发了JAVA的接口。就这样吧，但愿对你有所帮助咯，以上。

https://www.zhihu.com/question/67171606