thinkphp集成vue-cli脚手架

本文详细介绍了如何在Thinkphp项目中集成Vue-Cli前端脚手架,从安装node和Vue-Cli,到创建Vue项目、配置路由、与PHP解耦等步骤,助力提升后台管理效率。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

本文主要介绍怎么在Thinkphp中集成后台前端脚手架框架Vue-Cli。

一.安装Vue-Cli到Thinkphp中

1.1.1 检查是否安装node

终端输入npm的指令如果没有安装的话会提示未找到指令

正确的姿势如下图,说明已经安装了node依赖

1.1.2 安装node

到node的官网地址进行下载并安装步骤安装 node 安装地址:  http://nodejs.cn/download/

注 :安装 vue-cli 脚手架目前需要node版本为 v4.0 以上

1.2 全局安装vue-cli

命令行执行 : npm install -g vue-cli 加-g是安装到全局,有时会安装失败如下图:

安装失败是因为权限不足,这时候使用sodo npm install -g vue-cli 进行管理员权限的安装即可,第一次安装需要输入管理员密码

安装完成检查一下vue的版本已确认vue安装完毕

1.3 在Thinkphp中安装vue 1.3.1 首先进入需要安装vue-cli的具体路径, 我的工程目录为:

1.3.2 执行命令: vue init webpack Mob(你新建的项目名称/文件名称)执行之后将会 自动初始化一个文件夹 :Mob

1.3.3 分别输入下列命令,会在8080端口开启一个网页服务

接下来我们访问 http://localhost:8080 就会出现vue的欢迎主页了

如果观察路由便会发现其指向了HelloWorld组件并展示,这也就说明vue-cli脚手架安装完成了

二.在Thinkphp后台管理系统中使用vue

vue-cli为我们创建后台管理系统页面提供了很好的方案,为了能够很好的和php代码进行解耦 我们可以把vue-cli的入口封装成一个模块组件,也就是我们经常在后台管理系统中具体的内容管理部分。下面是具体的实现步骤:

2.1 首先我们在admin模块中创建一个service控制器,我们把service控制器当成是后台管理系统的服务模块。在这个控制器中我们创建一系列的菜单模块并跳转至同一主页实现接口的统一。

2.2 书写service的入口文件index.html 并将打包好的vue单页进行引入

2.3 在router的index.js中配置路由

2.4 因为默认的vue单页打包的页面文件名会添加哈希后缀,为了统一引入方便我们在webpack.prod.conf.js中修改配置文件将哈希后缀删除

2.5 在终端输入npm run build 进行打包编译,因为之前我们添加了插件eslint,进行了代码格式检查所以会出现大量的警告,可以在webpack.base.conf.js中隐藏eslint的校验。 剔除校验前:

修改配置文件:

再次编译后,便没有了警告:

 

2.6 打包完成后,发现在打包文件夹dist中多出了书写的两个单页

2.7 如果需要在本地进行预览调试则需要在service的index.html引入当前打包好的shopList和infoList单页

在vuePage.html中添加js

 

2.8 终端输入npm run build 在浏览器中打开   http://localhost/admin/service/infoList#/infoList   这时候的页面结构是这样的,vue单页和php页面完全解耦,书写后台管理系统的时候我们只要关注vue单页区域就可以了,页面跳转和单页配置在php代码中完成即可。

2.9 主要的vue单页的书写可以不用每次都使用npm run build 进行打包.我们只要使用vue提供的8080端口就可以直接调试vue单页了 我们在浏览器打开  http://localhost:8080/admin/service/infoList#/infoList  

3.结语

Vue-Cli是现在非常流行的渐进式的前端框架,在后台管理单页中使用能够提高效率。这样设计能够使vue的单页书写完全脱离thinkphp的耦合,后台前端人员只需要在thinkphp中做少量的配置,可以把主要的工作中心放在vue单页的书写和维护上面。

### 如何在 ThinkPHP集成和使用 Vue.js #### 配置项目结构 为了实现前后端分离开发模式,可以按照推荐的项目结构调整代码布局。通常情况下,ThinkPHP 的 `public` 文件夹作为项目的入口文件所在位置,而前端资源则存放在独立的目录下[^2]。 以下是典型的项目结构: ``` /tp-app /app # ThinkPHP 后端代码 /public # 入口文件 /resources # 前端资源 /js # Vue.js 组件 /node_modules # npm 依赖 ``` 通过这种结构设计,能够清晰地区分前端与后端逻辑,便于维护和扩展。 --- #### 安装 Vue 脚手架工具 要快速搭建 Vue.js 环境,可利用 Vue CLI 工具创建前端工程。执行以下命令安装 Vue CLI 并初始化项目: ```bash npm install -g @vue/cli vue create frontend-project ``` 上述操作会生成一个名为 `frontend-project` 的 Vue.js 项目,其中包含了完整的构建工具链和支持功能[^1]。 --- #### 修改 ThinkPHP 的静态资源配置 为了让 ThinkPHP 正确加载由 Vue 构建后的静态资源,在完成 Vue 项目编译之后,需将其产物复制到 ThinkPHP 的公共路径中。具体做法如下: 1. 编辑 Vue 项目的配置文件 `vue.config.js`,设置输出目录为目标地址 `/tp-app/public/static/vue-dist`。 ```javascript module.exports = { outputDir: '../tp-app/public/static/vue-dist' }; ``` 2. 执行打包指令以生成最终版本的前端应用: ```bash npm run build ``` 3. 更新 ThinkPHP 的路由规则,允许访问这些静态文件。编辑 `route/route.php` 或者其他自定义路由文件,添加类似下面的内容来处理未匹配请求的情况: ```php use think\facade\Request; return [ '__pattern__' => [ 'name' => '\w+', ], '[hello]' => [ ':id' => ['index/hello', ['method' => 'get'], ['id' => '\d+']], ':name' => ['index/hello', ['method' => 'post']], ], '*' => function () { $pathInfo = Request::instance()->getPathinfo(); if (!file_exists('./static/vue-dist/' . ltrim($pathInfo, '/'))) { return './static/vue-dist/index.html'; } }, ]; ``` 此部分实现了当用户尝试访问不存在的具体页面时重定向至 Vue 单页应用程序 (SPA) 的默认行为。 --- #### 创建 API 控制器 对于现代 Web 应用程序而言,前后端交互主要依靠 RESTful APIs 实现数据交换。因此需要基于 ThinkPHP 框架建立相应的控制器用于提供服务接口支持。 例如新增加一个简单的 User 数据获取方法: ```php namespace app\api\controller; use think\Controller; class UserController extends Controller{ public function getUsers(){ // 这里模拟返回一些测试数据 return json([ ["id"=>1,"username"=>"admin"], ["id"=>2,"username"=>"guest"] ]); } } ``` 随后可以通过 HTTP 请求调用该 URL 地址(假设域名解析正常),像这样: `http://your-domain/api/UserController/getUsers`. 最后一步就是在 Vue.js 当中的组件内部发起 AJAX 请求读取服务器响应的数据并渲染界面显示出来即可。 ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值