随着 web 技术的不断发展，前后端分离已经成为了一种趋势。前端框架 vue.js 目前也越来越流行，那么在 thinkphp 中如何使用 vue 呢？本文将介绍使用 thinkphp5.1 框架集成 vue.js 的方法。
一、安装 Node.js
在开始之前，确保你已安装 Node.js 环境，若未安装可前往官网下载并进行安装。
二、创建新项目
使用 Composer 命令，在终端输入以下命令：
1
composer create-project topthink/think=5.1.* myapp
运行以上命令后，会在当前路径下生成一个 myapp 文件夹。接着运行以下进入目录并安装 ThinkPHP 依赖：
1
2
cd myapp
composer install
三、安装前端依赖
在确认已进入 myapp 目录后，在命令行工具中输入以下指令，安装所需前端依赖：
1
npm install
安装完成后，可在 myapp 目录下的 node_modules 文件夹中，看到已成功安装的依赖包。
四、配置 webpack.mix.js
webpack.mix.js 文件用于引入自定义的编译器和前端依赖包之间的联系。通过 webpack.mix.js 文件，能够定制如何构建和打包前端代码。
在 myapp 项目文件夹下，创建一个新文件 webpack.mix.js，添加以下代码：
1
2
3
4
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 组件的渲染模板，代码如下：
1
2
3
4
5
<title>Vue component - ThinkPHP</title><meta name="csrf-token" content="{{ csrf_token() }}"><link rel="stylesheet" href="%7B%7B%20mix(css/app.css)%20%7D%7D"><div id="app">
<example-component></example-component>
</div>
<script src="%7B%7B%20mix(js/app.js)%20%7D%7D"></script>
以上代码中：
用于跨域攻击防御； 引入样式；接下来在 resources/js/ 目录下新建一个文件夹 components，并在其中新建 ExampleComponent.vue 文件。这个文件是一个 Vue 单文件组件，将会被渲染到 vue.blade.php 文件。代码如下：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<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>
以上代码中：
标签用于插入 HTML 模板； <script> 标签用于插入 JavaScript 代码，通过 export default 导出 Vue 单文件组件；</script>六、在 Blade 模板中使用 Vue.js 组件
完成以上步骤后，即可在 blade 模板中使用 Vue.js 组件添加以下代码：
1
2
3
4
5
@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 文件即可看到效果。
1
npm run dev
八、集成 Vue.js
在将 Laravel Mix 集成到 ThinkPHP 项目中后，下一步就是集成 Vue.js。这里使用了 Laravel Mix 和 Lodash.debounce 依赖，代码如下：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
let mix = require(laravel-mix);
let debounce = require(lodash.debounce);
// styles
mix.sass(resources/assets/sass/app.scss, public/css);
// scripts
mix.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
}
]
}
});
// browserSync
if (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: /