php vue开发环境如何搭建？新手也能看懂的配置步骤！

发布日期： 2025-10-23 阅读量： 作者： admin

最近琢磨着前后端分离这事儿，以前 PHP 老是混着 HTML 一起写，虽然也用过模板引擎，但感觉前端交互复杂起来，就有点力不从心。听他们说 * 这东西挺火，能让前端开发更爽，就想着自己动手试试，看看 PHP 跟 Vue 到底能不能搭伙过日子。

准备工作

动手之前，我先检查了下自己电脑上的环境。PHP 肯定是有的，我吃饭的家伙嘛用 XAMPP 集成环境，里面 PHP、Apache、MySQL 都带了，方便。主要是 Vue 这边，听说它要跑在 * 环境上。

检查 *： 我打开命令行，敲了个 node -v，果然，没装。那就得先装 *。去它官网下了个稳定版的安装包，一路下一步就装好了。装完再敲 node -v 和 npm -v，能看到版本号就说明 OK 了。
装 Vue CLI： 接着是 Vue 的脚手架工具，叫 Vue CLI。这东西能帮我们快速搭起 Vue 项目的架子。命令行里输 npm install -g @vue/cli，等它跑完，全局就装好了。

开始搞 Vue

环境准备就开始创建 Vue 项目。找了个放代码的目录，打开命令行，运行 vue create my-vue-project。它会问我要选默认配置还是手动选。我第一次搞，就选了手动，勾上了 Babel、Router（想着以后可能要弄路由）。然后它就自己在那下载一堆东西，初始化项目。等了会儿，提示成功了。

进到项目目录 cd my-vue-project，然后跑 npm run serve。命令行显示项目跑起来了，还给了个本地地址。浏览器打开一看，Vue 的欢迎页面出来了。前端这边算是跑起来了。

PHP 后端接口

Vue 这边先放着，回过头来弄 PHP。我的想法很简单，PHP 就负责提供数据接口，Vue 通过这个接口拿数据展示。我就在我 XAMPP 的网站目录下，建了个简单的 `*` 文件。

里面没用啥框架，就纯 PHP 写：

先准备点假数据，比如一个包含几个用户信息的数组。

然后设置一下 HTTP 头，告诉浏览器我返回的是 JSON 格式的数据：header('Content-Type: application/json');

用 json_encode() 把那个数组转成 JSON 字符串，echo 输出。

搞定。在浏览器里直接访问这个 `*` 的地址，能看到一串 JSON 数据，说明 PHP 接口这块没问题。

连起来试试

接下来是关键，怎么让 Vue 去请求 PHP 的接口拿到数据。

回到 Vue 项目代码。我打算在它默认生成的那个组件里试试。得先装个能发 HTTP 请求的库，大家好像都用 axios，那我也用它。在 Vue 项目的命令行里运行 npm install axios。

装好后，在的 <script> 部分：

先 import axios from 'axios'; 把它引进来。
然后在 data() 里定义一个变量，比如 userData: []，用来存放从 PHP 拿来的数据。
在 mounted() 这个生命周期钩子里面（就是组件挂载到页面后会执行的地方），用 axios 发请求：*('http://localhost/path/to/my/*')。
请求成功后，在 .then() 回调里，把拿到的数据赋值给我们定义的 userData。
在 <template> 部分，用 Vue 的 v-for 指令遍历 userData，把数据显示出来。

遇到点小麻烦

写完代码，刷新 Vue 页面。咦？数据没出来，浏览器控制台还报错了，说啥跨域问题（CORS）。这才想起来，Vue 开发服务器跑在比如 localhost:8080，而我的 PHP 接口是跑在 Apache 默认的 localhost:80，端口不一样，浏览器觉得不安全，就给拦了。

解决办法也简单，就是在 PHP 那个 `*` 文件开头，加上允许跨域的 HTTP 头：

header("Access-Control-Allow-Origin: "); 这个表示允许所有来源访问，开发时图方便可以这样，正式上线肯定不能这么写，得指定允许的域名。

加上这句之后，再刷新 Vue 页面，数据出来了！PHP 提供的数据成功显示在了 Vue 组件里。

效果咋样

跑通之后感觉还挺不错的。PHP 就老老实实待在后端处理业务逻辑、操作数据库、提供数据接口，它擅长这个。Vue ，就专心负责前端界面的展示和交互，组件化开发也让代码结构清晰不少。虽然刚开始搭环境、解决跨域费了点功夫，但确实实现了前后端的分离。

以后再开发，前端后端可以各干各的，只要接口定义好就行。感觉这种开发模式效率还是能提高不少的，特别是对稍微复杂点的项目来说。这回实践算是成功了，以后可以考虑在实际项目里用起来。

上一篇: 为什么要做具有口碑的网站seo优化？能带来哪些好处？

下一篇: 青岛企业网站优化方案：让你的网站快速提升曝光率！

php vue开发环境如何搭建？新手也能看懂的配置步骤！

随便看看