thinkphp集成前端支架Vue-cli教程图

本文主要介绍如何在Thinkphp中集成后端脚手架框架Vue-Cli。

1.将Vue-Cli安装到Thinkphp中

1.1.1检查是否安装节点

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

下图显示了正确的状态，表明已经安装了节点依赖关系

1.1.2安装节点

去节点官网地址下载安装步骤安装节点安装地址：http://nodejs.cn/download/

注意：要安装vue-cli支架，目前需要有高于v4.0的节点版本

1.2 vue-CLI的全球安装

在命令行执行： npm install -g vue-cli plus -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打开一个web服务。

接下来，当我们访问http://localhost:8080时，会出现vue的欢迎主页。

如果您观察路线，您会发现它指向HelloWorld组件并显示它，这意味着vue-cli脚手架的安装已经完成

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

Vue-cli为我们创建后台管理系统页面提供了很好的解决方案。为了与php代码解耦，我们可以将vue-cli的入口打包成一个模块组件，这是后台管理系统中具体的内容管理部分。具体实施步骤如下：

2.1首先，我们在admin模块中创建一个服务控制器，我们将服务控制器视为后台管理系统的服务模块。在这个控制器中，我们创建了一系列菜单模块，并跳转到同一个主页来统一界面。

2.2编写服务index.html条目文件，介绍打包的vue单页

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

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

2.5在终端进入npm run build进行打包编译，因为我们之前添加了插件eslint并检查了代码格式，所以会有很多警告，并且eslint的验证可以隐藏在web pack . base . conf . js pre reject check中：

修改配置文件：

再次编译后，没有警告：

2.6打包完成后，发现打包文件夹dist中有两个额外写入的单页

2.7如果您需要在本地预览和调试，您需要将当前打包的商店列表和信息列表页面引入服务index.html

将js添加到vuePage.html

2.8终端输入npm run build并在浏览器中打开http://localhost/admin/service/info list #/info list。这时，页面结构是这样的。vue单个页面与php页面完全分离。在编写后台管理系统时，我们只需要关注vue单页区，页面跳转和单页配置都可以用php代码完成。

2.9主vue单页的编写可以打包，而无需每次都使用npm run build。我们可以使用vue提供的8080端口直接调试vue单页。我们在浏览器中打开http://localhost 33608080/admin/service/info list #/info list。

3.结论

Vue-Cli是一个非常流行的渐进式前端框架，用于后台管理单页时可以提高效率。通过这样的设计，vue的单页编写可以完全脱离thinkphp的耦合，后台的前端人员只需要在thinkphp中做少量的配置，就可以专注于vue的单页编写和维护。

以上是边肖介绍的thinkphp集成前端脚手架Vue-cli教程图，希望对大家有所帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！