vue怎么配合php(怎样学好vue)

导读：本篇文章编程笔记来给大家介绍有关vue怎么配合php的相关内容，希望对大家有所帮助，一起来看看吧。

本文目录一览：

• 
  1、后端thinkphp和前端vue怎么协调
  


• 
  2、让 WebStorm / PHPStorm 支持 Vue
  


• 
  3、怎么用vue-resource与thinkphp配合～呢？
  


• 
  4、vue+webpack能配合php进行开发吗
  


• 
  5、如何利用vue和php做前后端分离开发
  


• 
  6、前端vue与后端Thinkphp在服务器的部署
  

后端thinkphp和前端vue怎么协调

thinkphp作为服务端，为客户端提供数据。而Vue是客户端的一个Javascript框架。便于我们对页面进行处理。

一般情况下，vue通过异步请求来获取数据。由于实例化vue时已经将相关的变量、模板等定义好了。

当获取到thinkphp回传的数据后，将会自动的把数据对应的呈现在网页上。 你看过后很简单吧以后不会可以向我一样经常到后盾人找找相关教材看看就会了，希望能帮到你，给个采纳吧谢谢(⁄ ⁄•⁄ω⁄•⁄ ⁄)

让 WebStorm / PHPStorm 支持 Vue

众所周知 Jetbrains 系列的产品强大且好用. 但是对Vue的支持是出了名的不好

在编写Vue项目的时候, 往往只能使用Atom等编辑器

我这种 Jetbrains 粉表示不服, 一定有办法使用的.

在设置中选择plugin(插件), 选择 Browse repositories, 左上角搜索Vue

在设置中, 将 *.vue 添加进入Vue.js Template 中. 若提示冲突, 点击移除原来的即可

在设置中搜索Javascript, 将JS版本选择为ECMAScript 6

在设置中搜索Unterminated statement, 将 Unterminated statement 的勾去掉

3.####防止node_modules使IDEA卡死

在IDEA开启的时候, 右下角全局设置

转到file types

同一个窗口下的

三个选项去除

正常使用

IDEA是无法是别的

要用这样的模式

目前没有完美的方法.

但是谁能阻止程序员的黑科技呢?

怎么用vue-resource与thinkphp配合～呢？

thinkphp 设计服务端，全restful api的规范就行设计（其实只要返回json或xml就可以），

vue-resouve只是一个请求库，和jquery 的 ajax 是大同小异的

你可以去后盾人平台看看，里面的东西不错

vue+webpack能配合php进行开发吗

vue+webpack能配合php进行开发。

概述

项目中会用到的插件 vue-router vue-resource；

打包工具 webpack；

依赖环境 node.js；

如何利用vue和php做前后端分离开发

你都说了是前后端分离，就不需要把vue嵌套php代码里。前后端用纯接口交换数据，找后端同事定义好restful接口，清楚返回的数据结构，接下来前端这块你就可以自己mock数据进行开发了。

至于如何搭建环境，看你也是个新手，还是直接用vue-cli，基本满足你的开发需求。记得打包的时候，npm run build一下，打包好的文件夹就是后台那边需要的。

前端一点都不懂后台，这是简直不可想象的，劝你有时间还是要了解下后台的基本概念。

这样解决就可以了，简单粗暴，个人建议还是去后盾网去经常看看教学视频学习学习吧

前端vue与后端Thinkphp在服务器的部署

vue在服务端部署时，我们都知道通过npm run build 指令打包好的dist文件，通过http指定是可以直接浏览的，Thinkphp通过域名指向index.php文件才可以浏览。要使前端正常调用后端数据，有两种方法：1、前端跨域调用后端数据，2、前端打包文件部署在后端的服务器文件夹下（同域）。

web服务器： apache

一、跨域

在服务器配置站点：

在路径/home/www/  下创建test项目文件夹，用来放项目文件。  

找到httpd-vhosts.conf文件配置站点  

前端站点：  

    ServerName test.test.com  

    DocumentRoot "/home/www/test/dist"    

    DirectoryIndex index.html  

后端站点：  

    ServerName test.testphp.com  

    DocumentRoot "/home/www/test/php"    

    DirectoryIndex index.php  

将前端打包好的dist文件放在/home/www/test/ 文件夹下，运行可浏览，当路径改变时，刷新会出现404错误。此时dist文件下创建一个.htaccess文件，当路径不存在时，路径指向能解决此问题。

  RewriteEngine On  

  RewriteBase /  

  RewriteRule ^index\.html$ - [L]  

  RewriteCond %{REQUEST_FILENAME} !-f  

  RewriteCond %{REQUEST_FILENAME} !-d  

  RewriteRule . /index.html [L]  

在/home/www/test文件夹下创建项目根目录php文件夹，将thinkphp文件放在php下。TP5的入口文件在public文件下，在这将public下的入口文件index.php挪到php文件夹下（个人习惯将入口文件放在项目根目录）, 后端绑定Index模块。

前端调用后端接口，存在跨域，跨域解决方法有好几种，在这我将在后端php做配置，解决跨域问题，在公用控制器设置跨域配置：

class Common extends Controller  

{  

    public $param;  

    // 设置跨域访问  

    public function _initialize()  

    {  

        parent::_initialize();  

        isset($_SERVER['HTTP_ORIGIN']) ? header('Access-Control-Allow-Origin: '.$_SERVER['HTTP_ORIGIN']) : '';  

        header('Access-Control-Allow-Credentials: true');  

        header('Access-Control-Allow-Methods: GET, POST, PUT, DELETE, OPTIONS');  

        header("Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept, authKey, sessionId");  

$param =  Request::instance()-param();  

$this-param = $param;  

    }  

}  

前端调用登录接口： this.axios.post('', {user: '', password: ''})。

(可在webpack.base.conf.js文件下可定义接口：)

二、同域

后端配置同上，公共配置器中的header配置注释。将前端的dist文件下的所有文件（包含.htaccess），放在php文件夹下。将后端index控制器的index方法的路径重定向php下的index.html文件：

namespace app\index\controller;  

use think\Controller;  

class Index extends Controller  

{  

    public function index() {  

$this-redirect('/index.html');  

    }  

}  

前端调用登录接口： this.axios.post('/index.php/base/login', {user: '', password: ''})

转自：

结语：以上就是编程笔记为大家整理的关于vue怎么配合php的全部内容了，感谢您花时间阅读本站内容，希望对您有所帮助，更多关于vue怎么配合php的相关内容别忘了在本站进行查找喔。