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

 更新时间:2018年08月30日 08:48:36   作者:风殇嶄往   我要评论
这篇文章主要介绍了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的教程图解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

相关文章

  • 使用Composer安装Yii框架的方法

    使用Composer安装Yii框架的方法

    这篇文章主要介绍了使用Composer安装Yii框架的方法,结合具体实例分析了Composer的相关使用技巧,需要的朋友可以参考下
    2016-03-03
  • php 从一个数组中随机的取出若干个不同的数实例

    php 从一个数组中随机的取出若干个不同的数实例

    本文章向码农介绍php从一个不重复的数组中随机的取出若干个不同的元素,难点是防止在取数的时候出现已经取到过的情况(特别是取到最后),需要尽可能的降低碰撞,需要的朋友可以参考下
    2016-12-12
  • thinkphp3.x自定义Action、Model及View的简单实现方法

    thinkphp3.x自定义Action、Model及View的简单实现方法

    这篇文章主要介绍了thinkphp3.x自定义Action、Model及View的简单实现方法,结合实例形式详细分析了thinkPHP3.x自定义模型、视图及控制器的具体步骤与相关实现技巧,需要的朋友可以参考下
    2016-05-05
  • Laravel 5框架学习之环境与配置

    Laravel 5框架学习之环境与配置

    本文给大家主要介绍的是Laravel5框架中的环境配置,给大家详细介绍了.env的配置文件,包含的数据库配置信息的详细解释,这里推荐给大家,有需要的小伙伴参考下。
    2015-04-04
  • ThinkPHP下表单令牌错误与解决方法分析

    ThinkPHP下表单令牌错误与解决方法分析

    这篇文章主要介绍了ThinkPHP下表单令牌错误与解决方法,较为详细的分析了thinkPHP表单令牌的原理、配置、错误原因与相应的解决方法,需要的朋友可以参考下
    2017-05-05
  • php 的反射详解及示例代码

    php 的反射详解及示例代码

    本文主要介绍PHP的反射内容的知识,这里提供相关的资料讲解,及简单示例代码供大家参考,有兴趣的小伙伴可以参考下
    2016-08-08
  • thinkPHP5.0框架环境变量配置方法

    thinkPHP5.0框架环境变量配置方法

    这篇文章主要介绍了thinkPHP5.0框架环境变量配置方法,结合实例形式分析了thinkPHP5.0中环境变量的功能、定义、配置与相关注意事项,需要的朋友可以参考下
    2017-03-03
  • laravel中的错误与日志用法详解

    laravel中的错误与日志用法详解

    这篇文章主要介绍了laravel中的错误与日志用法,结合实例形式详细分析了laravel中错误与日志的相关设置与使用技巧,需要的朋友可以参考下
    2016-07-07
  • Yii遍历行下每列数据的方法

    Yii遍历行下每列数据的方法

    这篇文章主要介绍了Yii遍历行下每列数据的方法,结合实例形式分析了Yii框架下数据遍历的相关操作技巧,需要的朋友可以参考下
    2016-10-10
  • laravel 实现登陆后返回登陆前的页面方法

    laravel 实现登陆后返回登陆前的页面方法

    今天小编就为大家分享一篇laravel 实现登陆后返回登陆前的页面方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-10-10

最新评论