如何将ThinkPHP与Vue-cli前端脚手架集成？

本文共计1223个文字，预计阅读时间需要5分钟。

在ThinkPHP中集成Vue-Cli后端前端脚手架框架：

一、安装Vue-Cli到ThinkPHP

1.1 检查是否已安装Node.js - 终端输入命令：`npm` - 如果未安装Node.js，命令行会提示未找到命令，需要先安装Node.js。

1.2 安装Vue-Cli - 在ThinkPHP项目根目录下，执行命令：`npm install -g @vue/cli` - 安装完成后，可以使用命令：`vue --version` 检查Vue-Cli版本。

二、集成Vue-Cli到ThinkPHP

1. 创建Vue项目 - 在ThinkPHP项目根目录下，执行命令：`vue create vue-admin` - 选择合适的配置选项，然后进入新创建的vue-admin目录。

2. 配置Vue项目 - 在vue-admin目录下，配置项目文件和构建工具。

3. 集成Vue项目到ThinkPHP - 在ThinkPHP中，根据项目需求，配置路由和控制器，以连接前后端。 - 将Vue项目中的`public/index.`和`src`目录下的文件复制到ThinkPHP的public目录下。

三、运行项目

1. 启动ThinkPHP - 在ThinkPHP项目根目录下，执行命令：`php think run` - 默认监听8000端口。

2. 启动Vue项目 - 在vue-admin目录下，执行命令：`npm run serve` - 默认监听8080端口。

完成以上步骤后，就可以在浏览器中访问ThinkPHP的8000端口，并通过Vue-Cli搭建的前端页面进行操作了。