首頁 > 文章 > php框架 > thinkphp中如何使用vue

thinkphp中如何使用vue

王林原創: 2023-05-28 22:30:071436瀏覽

隨著 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 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 元件的渲染模板，程式碼如下：

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

以上程式碼中：

00e3e25c073cfb0205419538fcd81244 用於跨域攻擊防禦；
cb4723489a7fcd4566e660a234563d9a 引入樣式；
2e4c03ba1a844f9ccaa1fdeb1b48713f 作為Vue.js 元件的容器；
f669a2fb010860baaa34b3e329e9ddc39711b247f42f43ca3168f4ff0acf0adf 即為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>

以上程式碼中：

d477f9ce7bf77f53fbcf36bec1b69b7a 標籤用於插入HTML 範本；
#&lt ;script> 標籤用於插入JavaScript 程式碼，透過export default 匯出Vue 單一檔案元件；
c9ccee2e6ea535a969eb3f532ad9fe89 標籤用於插入單一檔案元件的樣式。

六、在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: /</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的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：js如何與thinkphp5資料交互下一篇：js如何與thinkphp5資料交互

看更多