So verwenden Sie Vue in Thinkphp-Denken Sie an PHP-php.cn

Mit der kontinuierlichen Weiterentwicklung der Webtechnologie ist die Trennung von Front-End und Backend zu einem Trend geworden. Das Front-End-Framework Vue.js wird immer beliebter. Wie kann man Vue in ThinkPHP verwenden? In diesem Artikel wird erläutert, wie Sie Vue.js mithilfe des ThinkPHP5.1-Frameworks integrieren.

1. Installieren Sie Node.js

Bevor Sie beginnen, stellen Sie sicher, dass Sie die Node.js-Umgebung installiert haben. Wenn nicht, können Sie sie auf der offiziellen Website herunterladen und installieren.

2. Erstellen Sie ein neues Projekt

Verwenden Sie den Composer-Befehl und geben Sie den folgenden Befehl in das Terminal ein:

composer create-project topthink/think=5.1.* myapp

Nach dem Login kopieren

Nachdem Sie den obigen Befehl ausgeführt haben, wird im aktuellen Pfad ein myapp-Ordner generiert. Führen Sie dann Folgendes aus, um das Verzeichnis aufzurufen und die ThinkPHP-Abhängigkeiten zu installieren:

cd myapp
composer install

Nach dem Login kopieren

3. Installieren Sie die Front-End-Abhängigkeiten

Nachdem Sie bestätigt haben, dass Sie das myapp-Verzeichnis aufgerufen haben, geben Sie die folgenden Anweisungen in das Befehlszeilentool ein, um die erforderlichen zu installieren Front-End-Abhängigkeiten:

npm install

Nach dem Login kopieren

Nach Abschluss der Installation können Sie die erfolgreich installierten Abhängigkeitspakete im Ordner „node_modules“ im Verzeichnis „myapp“ sehen.

4. Konfiguration webpack.mix.js

Die Datei webpack.mix.js wird verwendet, um die Verbindung zwischen dem benutzerdefinierten Compiler und dem Front-End-Abhängigkeitspaket herzustellen. Über die Datei webpack.mix.js können Sie anpassen, wie der Front-End-Code erstellt und verpackt wird.

Erstellen Sie im MyApp-Projektordner eine neue Datei webpack.mix.js und fügen Sie den folgenden Code hinzu:

let mix = require('laravel-mix');

mix.js('resources/js/app.js', 'public/js')
   .sass('resources/sass/app.scss', 'public/css');

Nach dem Login kopieren

Die Funktion des obigen Codes ist:

Einführen des Laravel Mix-Tools
Geben Sie die Ressourcen der Eintragsdatei an/ js/app.js und Ressourcenkompilierungsausgabepfad public/js
Geben Sie den Sass-Eintragsdateipfad resources/sass/app.scss und den Kompilierungsausgabepfad public/css an

Übrigens ist Laravel Mix ein Tool, das kombiniert Webpack mit anderen Build-Tools und dient zur Vereinheitlichung des Front-End-Workflows.

5. Erstellen Sie Vue.js-Komponenten

Bevor Sie mit dem Schreiben von Vue.js-Komponenten beginnen, müssen Sie zunächst ein Ressourcen-/Ansichtsverzeichnis erstellen, darunter einen neuen Ordnerindex erstellen und im Indexordner einen neuen Ordner mit dem Namen vue erstellen .blade.php-Datei. Diese Datei ist die Rendering-Vorlage der Vue.js-Komponente. Der Code lautet wie folgt:

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

Nach dem Login kopieren

Im obigen Code:

<meta name="csrf-token" content="{{ csrf_token () }}" > Wird zur domänenübergreifenden Angriffsabwehr verwendet; <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>

Nach dem Login kopieren

以上代码中：

<template> 标签用于插入 HTML 模板；
<script> 标签用于插入 JavaScript 代码，通过 export default 导出 Vue 单文件组件；
<style> 标签用于插入单文件组件的样式。

六、在 Blade 模板中使用 Vue.js 组件

完成以上步骤后，即可在 blade 模板中使用 Vue.js 组件添加以下代码：

@extends('index.vue')

@section('content')
  <example-component></example-component>
@endsection

Nach dem Login kopieren

以上代码中的 @extends('index.vue') 引用了刚才创建的 vue.blade.php 模板， @section('content') 为 Vue.js 组件指定了渲染位置，通过 example-component

<link rel="stylesheet" href="{{ mix('css/app.css') }}" /> Stile einführen;

<div id="app"> als Container für Vue.js-Komponenten

< ;/example-component>< /code> ist die Vue.js-Komponente. 
Als nächstes erstellen Sie einen neuen Ordner „components“ im Verzeichnis resources/js/ und erstellen darin eine neue Datei „ExampleComponent.vue“. Bei dieser Datei handelt es sich um eine Vue-Einzeldateikomponente, die in der Datei vue.blade.php gerendert wird. Der Code lautet wie folgt: 
npm run dev
Nach dem Login kopieren
Im obigen Code: 
<template>-Tag wird zum Einfügen einer HTML-Vorlage verwendet; 
<script>-Tag wird verwendet, um JavaScript-Code einzufügen und Vue-Einzeldateikomponenten über den Exportstandard zu exportieren. 
<style>-Tag wird verwendet, um den Stil einer Einzeldateikomponente einzufügen. 
6. Verwenden Sie die Vue.js-Komponente in der Blade-Vorlage. 
Nach Abschluss der obigen Schritte können Sie die Vue.js-Komponente in der Blade-Vorlage verwenden, um den folgenden Code hinzuzufügen: 
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
      }
    }
  });
}
Nach dem Login kopieren
@extends( ' im obigen Code index.vue') bezieht sich auf die gerade erstellte vue.blade.php-Vorlage, @section('content') gibt die Renderposition für die Vue.js-Komponente an , durch example -component gibt den Namen der aufzurufenden Komponente an. 
🎜7. Kompilieren Sie den Front-End-Code🎜🎜Wenn Sie den folgenden Befehl zum Kompilieren ausführen, werden public/js/app.js und public/css/app.css automatisch generiert. Der Effekt kann anhand der HTML-Datei im öffentlichen Verzeichnis gesehen werden. 🎜php think run
Nach dem Login kopieren
🎜8. Vue.js integrieren🎜🎜Nach der Integration von Laravel Mix in das ThinkPHP-Projekt besteht der nächste Schritt darin, Vue.js zu integrieren. Hier werden Laravel Mix- und Lodash.debounce-Abhängigkeiten verwendet. Der Code lautet wie folgt: 🎜rrreee🎜Im obigen Code: 🎜🎜🎜.vue({ version: 2 }) wird verwendet, um dem Laravel Mix-Projekt mitzuteilen, dass es die Version von verwenden soll Vue.js; 🎜🎜.babel() wird zum Ausführen von Vue.js in IE8 verwendet; 🎜🎜.webpackConfig() wird zum Hinzufügen anderer Regeln und Konfigurationselemente zum Builder verwendet. 🎜🎜🎜9. Fertig🎜🎜Nach Abschluss aller oben genannten Schritte können Sie Vue.js erfolgreich in ThinkPHP-Projekten verwenden. Führen Sie den folgenden Befehl aus, um den lokalen Server zu starten und den Effekt zu sehen: 🎜rrreee🎜Oben sind einige Methoden und Schritte für die Verwendung von Vue.js in ThinkPHP aufgeführt. Auf dieser Basis können Sie auch komplexere Probleme durch detailliertere Konfiguration lösen, z. B. die Übermittlung von Daten über die API, die Konfiguration des Routings usw. Ich hoffe, dass die oben genannten Methoden Ihnen in Ihrer Praxis helfen können. 🎜Das obige ist der detaillierte Inhalt vonSo verwenden Sie Vue in Thinkphp. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!