Heim >PHP-Framework >Denken Sie an PHP >So verwenden Sie Vue in Thinkphp
So verwenden Sie Vue in Thinkphp
- 王林Original
- 2023-05-28 22:30:071493Durchsuche
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
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
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 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');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>Im obigen Code:
-
102817a4cdf10ee9f239c375285fbd7cWird zur domänenübergreifenden Angriffsabwehr verwendet;b5b92cce0821c3bee9a20511635af1b3用于跨域攻击防御； -
4ad18ce1a6ba3ce77702a0160620e402引入样式； -
0668f9b9672fb8bee085b6d77157e8a9作为 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 模板； -
3f1c4e4b6b16bbbd69b2ee476dc4f83a标签用于插入 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
5206c77e2f048ad4f962a3665f84266c Stile einführen;
2e4c03ba1a844f9ccaa1fdeb1b48713f als Container für Vue.js-Komponenten
f669a2fb010860baaa34b3e329e9ddc3< ;/example-component> ist die Vue.js-Komponente. <p></p>
<p>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: </p><pre class='brush:php;toolbar:false;'>npm run dev</pre><p>Im obigen Code: </p>
<ul>
<li>
<code>d477f9ce7bf77f53fbcf36bec1b69b7a-Tag wird zum Einfügen einer HTML-Vorlage verwendet;
3f1c4e4b6b16bbbd69b2ee476dc4f83a-Tag wird verwendet, um JavaScript-Code einzufügen und Vue-Einzeldateikomponenten über den Exportstandard zu exportieren. c9ccee2e6ea535a969eb3f532ad9fe89-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
}
}
});
}@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.
php think run🎜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!