隨著 web 技術的不斷發展，前后端分離已經成為了一種趨勢。前端框架 vue.js 目前也越來越流行，那么在 thinkphp 中如何使用 vue 呢？本文將介紹使用 thinkphp5.1 框架集成 vue.js 的方法。
一、安裝 Node.js
在開始之前，確保你已安裝 Node.js 環境，若未安裝可前往官網下載并進行安裝。
二、創建新項目
使用 Composer 命令，在終端輸入以下命令：
立即學習“PHP免費學習筆記（深入）”；
composer create-project topthink/think=5.1.* myapp
運行以上命令后，會在當前路徑下生成一個 myapp 文件夾。接著運行以下進入目錄并安裝 ThinkPHP 依賴：
cd myapp composer 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 組件的渲染模板，代碼如下：
<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>
以上代碼中：
- 用于跨域攻擊防御；
- 引入樣式；
-
作為 Vue.js 組件的容器；
即為 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>以上代碼中：
- 標簽用于插入 HTML 模板；
- <script> 標簽用于插入 JavaScript 代碼，通過 export default 導出 Vue 單文件組件；</script>
六、在 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'); // 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: /
