thinkphp集成前端脚手架Vue-cli的教程图解


Posted in PHP onAugust 30, 2018

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

一.安装Vue-Cli到Thinkphp中

1.1.1 检查是否安装node

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

thinkphp集成前端脚手架Vue-cli的教程图解

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

thinkphp集成前端脚手架Vue-cli的教程图解

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是安装到全局,有时会安装失败如下图:

thinkphp集成前端脚手架Vue-cli的教程图解

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

thinkphp集成前端脚手架Vue-cli的教程图解

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

thinkphp集成前端脚手架Vue-cli的教程图解

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

thinkphp集成前端脚手架Vue-cli的教程图解

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

thinkphp集成前端脚手架Vue-cli的教程图解

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

thinkphp集成前端脚手架Vue-cli的教程图解

thinkphp集成前端脚手架Vue-cli的教程图解

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

thinkphp集成前端脚手架Vue-cli的教程图解

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

thinkphp集成前端脚手架Vue-cli的教程图解

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

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

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

thinkphp集成前端脚手架Vue-cli的教程图解

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

thinkphp集成前端脚手架Vue-cli的教程图解

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

thinkphp集成前端脚手架Vue-cli的教程图解

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

thinkphp集成前端脚手架Vue-cli的教程图解

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

thinkphp集成前端脚手架Vue-cli的教程图解

修改配置文件:

thinkphp集成前端脚手架Vue-cli的教程图解

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

 thinkphp集成前端脚手架Vue-cli的教程图解

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

thinkphp集成前端脚手架Vue-cli的教程图解

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

thinkphp集成前端脚手架Vue-cli的教程图解

在vuePage.html中添加js

 thinkphp集成前端脚手架Vue-cli的教程图解

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

thinkphp集成前端脚手架Vue-cli的教程图解

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

thinkphp集成前端脚手架Vue-cli的教程图解

3.结语

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

以上所述是小编给大家介绍的thinkphp集成前端脚手架Vue-cli的教程图解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

PHP 相关文章推荐
PHP如何透过ODBC来存取数据库
Oct 09 PHP
php md5下16位和32位的实现代码
Apr 09 PHP
PHP 输出缓存详解
Jun 20 PHP
php 计算两个时间戳相隔的时间的函数(小时)
Dec 18 PHP
zen cart新进商品的随机排序修改方法
Sep 10 PHP
PHP常用开发函数解析之数组篇[未完结]
Jul 30 PHP
php 如何获取数组第一个值
Aug 06 PHP
Linux中为php配置伪静态
Dec 17 PHP
PHP常用的排序和查找算法
Aug 06 PHP
thinkPHP内置字符串截取函数用法详解
Nov 15 PHP
php实现生成带二维码图片并强制下载功能
Feb 24 PHP
php文件后缀不强制为.php的实操方法
Sep 18 PHP
Django中通过定时任务触发页面静态化的处理方式
Aug 29 #PHP
PHP使用SMTP邮件服务器发送邮件示例
Aug 28 #PHP
PHP实现websocket通信的方法示例
Aug 28 #PHP
Yii2压缩PHP中模板代码的输出问题
Aug 28 #PHP
PHP实现的XXTEA加密解密算法示例
Aug 28 #PHP
PHP两个n位的二进制整数相加问题的解决
Aug 26 #PHP
PHP连接sftp并下载文件的方法教程
Aug 26 #PHP
You might like
php实现mysql备份恢复分卷处理的方法
2014/12/26 PHP
php使用GD实现颜色渐变实例
2015/06/02 PHP
php获取文件后缀的9种方法
2016/03/22 PHP
PHP环境搭建(php+Apache+mysql)
2016/11/14 PHP
Laravel框架源码解析之入口文件原理分析
2020/05/14 PHP
js用闭包遍历树状数组的方法
2014/03/19 Javascript
深入理解JavaScript系列(28):设计模式之工厂模式详解
2015/03/03 Javascript
JavaScript实现自动变换表格边框颜色
2015/05/08 Javascript
将页面table内容与样式另存成excel文件的方法
2015/08/05 Javascript
纯HTML5制作围住神经猫游戏-附源码下载
2015/08/23 Javascript
Javascript实现跨域后台设置拦截的方法详解
2017/08/04 Javascript
angular或者js怎么确定选中ul中的哪几个li
2017/08/16 Javascript
基于vue实现分页效果
2017/11/06 Javascript
VUE2.0+Element-UI+Echarts封装的组件实例
2018/03/02 Javascript
jQuery实现每隔一段时间自动更换样式的方法分析
2018/05/03 jQuery
Vue配合iView实现省市二级联动的示例代码
2018/07/27 Javascript
为jquery的ajax请求添加超时timeout时间的操作方法
2018/09/04 jQuery
vue+element+Java实现批量删除功能
2019/04/08 Javascript
微信小程序wepy框架学习和使用心得详解
2019/05/24 Javascript
vue中使用带隐藏文本信息的图片、图片水印的方法
2020/04/24 Javascript
vue 路由懒加载中给 Webpack Chunks 命名的方法
2020/04/24 Javascript
[01:15:45]DOTA2上海特级锦标赛B组小组赛#1 Alliance VS Spirit第一局
2016/02/26 DOTA
Django model update的多种用法介绍
2020/03/28 Python
Django 项目布局方法(值得推荐)
2020/03/22 Python
Python 操作 PostgreSQL 数据库示例【连接、增删改查等】
2020/04/21 Python
python的pip有什么用
2020/06/17 Python
python 使用递归的方式实现语义图片分割功能
2020/07/16 Python
python3实现语音转文字(语音识别)和文字转语音(语音合成)
2020/10/14 Python
运动鞋中的劳斯莱斯:索康尼(SAUCONY)
2017/08/09 全球购物
Giglio英国站:意大利奢侈品购物网
2018/03/06 全球购物
澳大利亚制造的蜡烛和扩散器:Glasshouse Fragrances
2018/05/20 全球购物
个人求职简历的自我评价范文
2013/10/09 职场文书
学习十八大坚定理想信念心得体会
2014/03/11 职场文书
2014年学校党建工作汇报材料
2014/11/02 职场文书
MySQL EXPLAIN输出列的详细解释
2021/05/12 MySQL
用Python监控你的朋友都在浏览哪些网站?
2021/05/27 Python