随着 web 技术的不断发展，前后端分离已经成为了一种趋势。前端框架 vue.js 目前也越来越流行，那么在 thinkphp 中如何使用 vue 呢？本文将介绍使用 thinkphp5.1 框架集成 vue.js 的方法。
一、安装 node.js
在开始之前，确保你已安装 node.js 环境，若未安装可前往官网下载并进行安装。
二、创建新项目
使用 composer 命令，在终端输入以下命令：
composer create-project topthink/think=5.1.* myapp
运行以上命令后，会在当前路径下生成一个 myapp 文件夹。接着运行以下进入目录并安装 thinkphp 依赖：
cd myappcomposer install
三、安装前端依赖
在确认已进入 myapp 目录后，在命令行工具中输入以下指令，安装所需前端依赖：
npm install
安装完成后，可在 myapp 目录下的 node_modules 文件夹中，看到已成功安装的依赖包。
四、配置 webpack.mix.js
webpack.mix.js 文件用于引入自定义的编译器和前端依赖包之间的联系。通过 webpack.mix.js 文件，能够定制如何构建和打包前端代码。
在 myapp 项目文件夹下，创建一个新文件 webpack.mix.js，添加以下代码：
let mix = require('laravel-mix');mix.js('resources/js/app.js', 'public/js') .sass('resources/sass/app.scss', 'public/css');
以上代码的作用是：
引入 laravel mix 工具指定入口文件 resources/js/app.js 和资源编译输出路径 public/js指定 sass 入口文件路径 resources/sass/app.scss 和编译输出路径 public/css顺便说一句，laravel mix 是一个将 webpack 与其他构建工具结合的工具，用于统一前端工作流程。
五、创建 vue.js 组件
在开始编写 vue.js 组件之前，首先需要新建一个 resources/views 目录，并在其下新建一个文件夹 index，在 index 文件夹中新建一个名为 vue.blade.php 的文件。这个文件将会是 vue.js 组件的渲染模板，代码如下：
<!doctype html><html><head> <title>vue component - thinkphp</title> <meta name="csrf-token" content="{{ csrf_token() }}"> <link rel="stylesheet" href="{{ mix('css/app.css') }}" /></head><body> <div id="app"> <example-component></example-component> </div> <script src="{{ mix('js/app.js') }}"></script></body></html>
以上代码中：
<meta name="csrf-token" content="{{ csrf_token() }}"> 用于跨域攻击防御；<link rel="stylesheet" href="{{ mix('css/app.css') }}" /> 引入样式；<div id="app"> 作为 vue.js 组件的容器；<example-component></example-component> 即为 vue.js 组件。接下来在 resources/js/ 目录下新建一个文件夹 components，并在其中新建 examplecomponent.vue 文件。这个文件是一个 vue 单文件组件，将会被渲染到 vue.blade.php 文件。代码如下：
<template> <div class="container"> <h1 class="title">vue component - thinkphp</h1> <p>message: {{ message }}</p> </div></template><script>export default { data () { return { message: 'hello, vue!' } }}</script><style>.container { margin: 0 auto; max-width: 640px;}.title { font-size: 32px; color: #333;}</style>
以上代码中：
<template> 标签用于插入 html 模板；<script> 标签用于插入 javascript 代码，通过 export default 导出 vue 单文件组件；<style> 标签用于插入单文件组件的样式。六、在 blade 模板中使用 vue.js 组件
完成以上步骤后，即可在 blade 模板中使用 vue.js 组件添加以下代码：
@extends('index.vue')@section('content') <example-component></example-component>@endsection
以上代码中的 @extends('index.vue') 引用了刚才创建的 vue.blade.php 模板， @section('content') 为 vue.js 组件指定了渲染位置，通过 example-component 指定调用的组件名称。
七、编译前端代码
在执行以下命令进行编译时，会自动生成 public/js/app.js 和 public/css/app.css。通过 public 目录下的 html 文件即可看到效果。
npm run dev
八、集成 vue.js
在将 laravel mix 集成到 thinkphp 项目中后，下一步就是集成 vue.js。这里使用了 laravel mix 和 lodash.debounce 依赖，代码如下：
let mix = require('laravel-mix');let debounce = require('lodash.debounce');// stylesmix.sass('resources/assets/sass/app.scss', 'public/css');// scriptsmix.js('resources/assets/js/app.js', 'public/js') .vue({ version: 2 }) .babel(['public/js/app.js'], 'public/js/app.js') .webpackconfig({ module: { rules: [ { test: /.vue$/, loader: 'vue-loader' } ] } });// browsersyncif (process.env.node_env !== 'production') { mix.browsersync({ proxy: process.env.app_url || 'localhost:8000', notify: false, files: [ 'app/**/*.php', 'resources/views/**/*.php', 'public/**/*.{css,js}' ], snippetoptions: { rule: { match: /</body>/i } } });}
以上代码中：
.vue({ version: 2 }) 用于告诉 laravel mix 项目使用 vue.js 的版本；.babel() 用于在 ie8 中运行 vue.js；.webpackconfig() 用于为构建器增加其他的规则和配置项。九、准备就绪
完成以上所有步骤后，即可在 thinkphp 项目中顺利使用 vue.js。运行以下命令开启本地服务器即可看到效果：
php think run
以上是在 thinkphp 中使用 vue.js 的一些方法及步骤。在此基础上，你还可以通过更细致的配置解决更加复杂的问题，例如通过 api 传输数据、配置路由等等。希望以上方法能为你的实践带来帮助。
以上就是thinkphp中如何使用vue的详细内容。