php 脚手架,thinkphp集成前端脚手架Vue-cli的教程图解
本文主要介绍怎么在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-cli的教程图解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
php 脚手架,thinkphp集成前端脚手架Vue-cli的教程图解相关推荐
- 离线安装vue脚手架,内网安装@vue/cli
公司开发环境使用内网,无法用外网,搭建环境的时候,发现内网系统没有安装vue脚手架,我搜了很多文章,发现他们的方法对我都不适用,然后就自己摸索,最终皇天不负有心人,终于被我安装上了,一下是我内网离线安 ...
- 前端笔记-vue cli中使用echarts画江苏省地图
目录 基本概念 代码与实例 基本概念 这里使用echarts,框架用vue cli,下面这个链接是vue cli导入echarts https://blog.csdn.net/qq78442761/a ...
- 前端笔记-vue cli中使用router-link进行路由跳转
目录 以前的方法 新方法 以前的方法 以前是通过router的push进行跳转,代码如下: <template><div class="XXXXXXXXXXXXXXXXX& ...
- 前端笔记-Vue cli中使用axios后JavaScript变量传输给vue变量要注意的地方
目录 axios.all中的注意事项 为什么要采用全局的JavaScript变量给vue变量 axios.all中的注意事项 如下的请求: methods:{getData(){axios.all([ ...
- 前端笔记-vue cli中axios批量发送get和post请求及注意事项
目录 基本概念 关键代码 基本概念 这里安装好axios后,还要安装qs npm install --save qs 在vue cli中在created里面调用方法,他会在页面加载完成后自动调用! 批 ...
- 初步创建vue/cli工程教程
首先第一步创建vuecli工程,创建vuecli工程需要用nodejs+npm下载环境就行,这个工程非常的庞大,教程走一波! ·····先去vue官网找到下载vue/cli的命令-----官网地址:v ...
- Web前端笔记-vue cli中使用echarts加载geo地图
效果是这样的: 此处是使用echarts加载geo地图. 这里简单说下逻辑: 首先npm下个包: npm install echarts 然后用个vue组件封装下. 如下代码: <templat ...
- 前端笔记-vue cli为web添加底纹
目录 基本概念 代码与实例 基本概念 这里主要是使用了css预处理 首先下载包 npm install stylus stylus-loader 随后创建文件,然后写代码 这里还要导入代码: 这里还要 ...
- 前端笔记-vue cli中v-bind动态数据实时更新
目录 基本概念 代码 基本概念 如下的例子,刚开始运行: 点击按钮: 数据库修改下数据: 再点击按钮刷新下: 下面给出请求的json数据: 刷新有2个方式 第一种是强制刷新,这样是有问题的,数据和图表 ...
最新文章
- 手动增加swap空间
- [汇编语言学习笔记][第二章寄存器]
- ubuntu安装php-curl拓展
- 配置mysql使其允许外部ip进行登录
- 大工14秋《计算机应用基础》在线测试2,2017大工《计算机应用基础》在线测试2答案.doc...
- [图]运动鞋用“囧”字做图案卖断货
- Python游戏编程入门,让你秒变电脑大神!
- pad点餐系统 内存管理的一点总结
- 【操作系统内存管理(基本概念)】
- netmeeting的使用(详解)
- Hexo 博客提交百度、谷歌搜索引擎收录
- C++字符串拼接性能测试
- 2021美团笔试题(第十套)个人解答
- 安卓系统,启用微信浮窗 session 丢失
- 使用计算机键盘的基本步骤,电脑如何用键盘开机_台式电脑键盘开机方法-win7之家...
- win10小喇叭出现红叉,解决办法(转)
- 文件夹的隐藏选项为灰色勾选,无法更改或删除
- might和could的区别用法_情态动词may与might用法
- CMMI2.0之我见-技术解决方案TS产品集成PI
- python怎么查看安装了哪些库