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的教程图解，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

赞 (0)

相关推荐

  • Vue 项目中遇到的跨域问题及解决方法(后台php)

    Vue 项目中遇到的跨域问题及解决方法(后台php)

    问题描述 前端 vue 框架,后台 php,百度跨域问题后台加这段代码 header("Access-Control-Allow-Origin: *"); 加了之后报这个错: The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'. The valu

  • vue+php实现的微博留言功能示例

    本文实例讲述了vue+php实现的微博留言功能.分享给大家供大家参考,具体如下: html部分: <!doctype html> <html> <head> <meta charset="utf-8"> <title>微博留言</title> <link href="style/weibo.css" rel="external nofollow" rel="s

  • vue.js过滤器+ajax实现事件监听及后台php数据交互实例

    vue.js过滤器+ajax实现事件监听及后台php数据交互实例

    本文实例讲述了vue.js过滤器+ajax实现事件监听及后台php数据交互.分享给大家供大家参考,具体如下: 在vue.js开发时,数据可以使用jquery和vue-resource来获取数据.在获取数据时,一定需要给一个数据初始值. index.html: <!doctype html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title> v

  • PHP结合Vue实现滚动底部加载效果

    前言 最近的一个项目手机端分页跳转不理想,自己做了一个滚动加载的一个Demo,下面话不多说了,来一起看看详细的介绍吧. 实现思路 1.获得滚动条到底部的距离 getScrollBottomHeight() 2.绑定滚动事件handleScroll() ,handleScroll()判断滚动条到底部距离是否小于设置的bottomHight,并且增加一个loading属性,防止加载时滑动时多次触发,造成多次加载 3.Ajax请求load.php,通过Page去查询获得当前页数(page+1)的内容

  • php和vue配合使用技巧和方法

    php和vue可以配合使用,我们可以利用vue和php进行前后端分离. 进行前后端分离的好处 前后端分离后可以使前后端工程师分工更加明确,让后端工程师专注于业务逻辑的实现以及性能优化,安全.前端工程师专注于用户体验,交互模式.大家各司其职,提高工作效率,充分发挥各自的长处. 进行前后端分离的坏处 1.SEO上的考虑 如果是 PC 端的站点,需要考虑是否需要强支持 SEO,前后端分离的架构,很可能需要搜索引擎的 spider 执行完 js 才能得到完整的可收录的页面,而"执行 js "并

  • vue.js 双层嵌套for遍历的方法详解, 类似php foreach()

    主要运用 template 标签,可相当于 php foreach() foreach(lists as $key){ //todo foreach($key.自定义字段 as k){ //todo } } <template v-for="key in lists" v-cloak> <tr> <td></td> <td ></td> <td ></td> <td ></

  • 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-

  • 前端架构vue动态组件使用基础教程

    前端架构vue动态组件使用基础教程

    目录 1.基本使用 2.配合 keep-alive使用 1.基本使用 新建组件 Article.vue <template> <div> <p>黄州东南三十里为沙湖,亦曰螺师店.予买田其间,因往相田得疾.</p> <p>闻麻桥人庞安常善医而聋.遂往求疗.</p> <p>安常虽聋,而颖悟绝人,以纸画字,书不数字,辄深了人意.</p> <p>余戏之曰:"余以手为口,君以眼为耳,皆一时异人也.&

  • 前端Vue单元测试入门教程

    目录 一.为什么需要单元测试 二.如何写单元测试 三.测试工具 四.Jest入门 安装 简单示例 Jest Cli 使用配置文件 使用 Babel vue-cli 中使用 Jest 常见示例 判断值相等 检查类false值 数字大小比较 字符串比较 数组和类数组 异常 只执行当前test 测试异步代码 回调函数 Promises Async/Await 安装和拆卸 测试前和测试后 测试用例分组 执行顺序 mock 函数 测试mock mock的返回值 模拟接口返回 mock函数的匹配器 五.Vu

  • vue cli 3.0 搭建项目的图文教程

    1.3.0版本包括了默认预设配置和用户自定义设置 2.对比2.0来看3.0的目录结构更加精简了 移除了配置文件目录 (config 和 build文件夹) 移除了 static 文件夹,新增 public 文件夹,并且 index.html 移动到 public 中 在 src 文件夹中新增了 views 文件夹,用于分类视图组件和公共组件 vue-cli 3.0 搭建 1. 安装或升级 Node.js vue-cli官网对于node版本有明确要求 Vue CLI 需要 Node.js 8.9

  • vue项目前端错误收集之sentry教程详解

    sentry简介 Sentry 是一个开源的错误追踪工具,可以帮助开发人员实时监控和修复系统中的错误.其专注于错误监控以及提取一切事后处理所需的信息;支持几乎所有主流开发语言( JS/Java/Python/php )和平台, 并提供了web来展示输出错误. sentry官网: https://sentry.io/ sentry安装 sentry 是一个开源的工具,可以自行搭建. 官方支持两种安装和运行 Sentry 服务器的方法, Docker 和 Python .推荐使用 Docker .

  • 详解Vue CLI 3.0脚手架如何mock数据

    前后端分离的开发模式已经是目前前端的主流模式,至于为什么会前后端分离的开发我们就不做过多的阐述,既然是前后端分离的模式开发肯定是离不开前端的数据模拟阶段. 我们在开发的过程中,由于后台接口的没有完成或者没有稳定之前我们都是采用模拟数据的方式去进行开发项目,这样会使我们的前后端会同时的进行,提高我们的开发效率. 因为最近自己在自学 Vue 也在自己撸一个项目,肯定会遇到使用数据的情况,所以就想着如何在前端做一些 mock 数据的处理,因为自己的项目使用的是 vue/cli 3.0 与 vue/cl

  • node.js与vue cli脚手架的下载安装配置方法记录

    node.js与vue cli脚手架的下载安装配置方法记录

    目录 一.node.js安装以及环境配置 1.下载vue.js 2.安装node.js 3.检查node程序是否安装成功 4.更改默认路径 5.添加环境变量 5.测试安装是否成功 二.安装vue-cli脚手架 1.检查node环境是否安装好 2.更改淘宝镜像下定制的cnpm(gzip 压缩支持) 命令行工具代替默认的npm 3.开始安装vue-cli 4.生成项目 5.打包上线 总结 一.node.js安装以及环境配置 1.下载vue.js 下载地址: https://nodejs.org/en

  • 基于vue cli重构多页面脚手架过程详解

    官方提供的项目生成工具vue-cli没有对多页面webApp的支持,但是在实际的项目中,我们需要这样的脚手架,参考了很多大牛的方法,这里提供了一种我的单页面脚手架转换为多页面脚手架的方案,供大家参考.不好的地方也请大家指正. 准备 使用vue-cli生成一个你需要的单页面项目脚手架,然后我们就要开始我们的改装工程了. 重构过程 步骤一 改变目录结构 step1 在src目录下面新建views文件夹,然后再views文件夹下新建index文件夹 step2 将src目录下的main.js和App.

  • vue cli安装使用less的教程详解

    vue cli安装使用less的教程详解

    vue-cli构建的项目默认是不支持less的,需要自己添加依赖 1.安装less和less-loader ,在项目目录下运行如下命令 npm install less less-loader --save-dev 2.安装成功后,打开build/webpack.base.conf.js ,在 module.exports = 的对象的module.rules 后面添加一段: module.exports = { // 此处省略无数行,已有的的其他的内容 module: { rules: [ /

  • 解决Idea、WebStorm下使用Vue cli脚手架项目无法使用Webpack别名的问题

    问题截图: 解决方案: 1.打开File --> Setting 窗口 2.搜索 Webpack 3.选择如下路径 总结 以上所述是小编给大家介绍的解决Idea.WebStorm下使用Vue cli脚手架项目无法使用Webpack别名的问题,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的.在此也非常感谢大家对我们网站的支持! 如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

随机推荐