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函数代码
Apr 22 PHP
rrmdir php中递归删除目录及目录下的文件
May 15 PHP
PHP设计模式之调解者模式的深入解析
Jun 13 PHP
解析PHP实现多进程并行执行脚本
Jun 18 PHP
windows下PHP_intl.dll正确配置方法(apache2.2+php5.3.5)
Jan 14 PHP
yii实现级联下拉菜单的方法
Jul 31 PHP
个人写的PHP验证码生成类分享
Aug 21 PHP
php中array_multisort对多维数组排序的方法
Jun 21 PHP
PHP登录验证码的实现与使用方法
Jul 07 PHP
中高级PHP程序员应该掌握哪些技术?
Sep 23 PHP
PHP判断json格式是否正确的实现代码
Sep 20 PHP
PHP生成随机数的方法总结
Mar 01 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
smarty的保留变量问题
2008/10/23 PHP
关于PHP中Object对象的笔记分享
2011/06/28 PHP
php常用Stream函数集介绍
2013/06/24 PHP
JavaScript 应用技巧集合[推荐]
2009/08/30 Javascript
基于JQuery实现的类似购物商城的购物车
2011/12/06 Javascript
使用jQuery重置(reset)表单的方法
2014/05/05 Javascript
window.location.href的用法(动态输出跳转)
2014/08/09 Javascript
JavaScript中的原型prototype属性使用详解
2015/06/05 Javascript
JS中的进制转换以及作用
2016/06/26 Javascript
jQuery操作dom实现弹出页面遮罩层(web端和移动端阻止遮罩层的滑动)
2016/08/25 Javascript
vue2.0+webpack环境的构造过程
2016/11/08 Javascript
JS使用ActiveXObject实现用户提交表单时屏蔽敏感词功能
2017/06/20 Javascript
Angular2里获取(input file)上传文件的内容的方法
2017/09/05 Javascript
bootstrap treeview 扩展addNode方法动态添加子节点的方法
2017/11/21 Javascript
[03:42]2014DOTA2西雅图国际邀请赛7月9日TOPPLAY
2014/07/09 DOTA
[02:44]重置世界,颠覆未来——DOTA2 7.23版本震撼上线
2019/12/01 DOTA
[58:11]守擂赛第二周擂主赛 DeMonsTer vs Leopard
2020/04/28 DOTA
Python中的模块和包概念介绍
2015/04/13 Python
基于Python中求和函数sum的用法详解
2018/06/28 Python
Python一句代码实现找出所有水仙花数的方法
2018/11/13 Python
python dict 相同key 合并value的实例
2019/01/21 Python
python按修改时间顺序排列文件的实例代码
2019/07/25 Python
django foreignkey外键使用的例子 相当于left join
2019/08/06 Python
CSS3实现超酷的黑猫警长首页
2016/04/26 HTML / CSS
HTML5 使用 sessionStorage 进行页面传值的方法
2018/07/02 HTML / CSS
条幅标语大全
2014/06/20 职场文书
三好学生个人总结
2015/02/15 职场文书
繁星春水读书笔记
2015/06/30 职场文书
教师廉政准则心得体会
2016/01/20 职场文书
浅谈Redis主从复制以及主从复制原理
2021/05/29 Redis
Python机器学习之基于Pytorch实现猫狗分类
2021/06/08 Python
Python如何导出导入所有依赖包详解
2021/06/08 Python
node.js如何自定义实现一个EventEmitter
2021/07/16 Javascript
在项目中使用redis做缓存的一些思路
2021/09/14 Redis
Win10 heic文件怎么打开 ? Win10 heic文件打开教程
2022/04/06 数码科技
nginx代理实现静态资源访问的示例代码
2022/07/07 Servers