Comment utiliser vue dans thinkphp
- 王林original
- 2023-05-28 22:30:071440parcourir
Avec le développement continu de la technologie Web, la séparation du front-end et du back-end est devenue une tendance. Le framework front-end Vue.js devient de plus en plus populaire maintenant, alors comment utiliser Vue dans ThinkPHP ? Cet article expliquera comment intégrer Vue.js à l'aide du framework ThinkPHP5.1.
1. Installez Node.js
Avant de commencer, assurez-vous d'avoir installé l'environnement Node.js. Sinon, vous pouvez vous rendre sur le site officiel pour le télécharger et l'installer.
2. Créez un nouveau projet
Utilisez la commande Composer et entrez la commande suivante dans le terminal :
composer create-project topthink/think=5.1.* myapp
Après avoir exécuté la commande ci-dessus, un dossier myapp sera généré dans le chemin actuel. Ensuite, exécutez ce qui suit pour entrer dans le répertoire et installer les dépendances ThinkPHP :
cd myapp composer install
3. Installez les dépendances frontales
Après avoir confirmé que vous avez entré le répertoire myapp, entrez les instructions suivantes dans l'outil de ligne de commande pour installer les éléments requis. Dépendances frontales :
npm install
Une fois l'installation terminée, vous pouvez voir les packages de dépendances installés avec succès dans le dossier node_modules sous le répertoire myapp.
4. Configuration webpack.mix.js
Le fichier webpack.mix.js est utilisé pour introduire la connexion entre le compilateur personnalisé et le package de dépendances front-end. Grâce au fichier webpack.mix.js, vous pouvez personnaliser la façon dont le code frontal est construit et empaqueté.
Dans le dossier du projet myapp, créez un nouveau fichier webpack.mix.js et ajoutez le code suivant :
let mix = require('laravel-mix');
mix.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css');La fonction du code ci-dessus est :
- Présentez l'outil Laravel Mix
- Spécifiez l'entrée du fichier resources/ js/app.js et le chemin de sortie de la compilation des ressources public/js
- Spécifiez le chemin du fichier d'entrée Sass resources/sass/app.scss et le chemin de sortie de la compilation public/css
À propos, Laravel Mix est un outil qui combine Webpack avec d'autres outils de construction, utilisés pour unifier le flux de travail frontal.
5. Créer un composant Vue.js
Avant de commencer à écrire des composants Vue.js, vous devez d'abord créer un répertoire resources/views, créer un nouvel index de dossier en dessous et créer un nouveau dossier nommé vue dans le dossier index. .fichier blade.php. Ce fichier sera le modèle de rendu du composant Vue.js. Le code est le suivant :
<!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>Dans le code ci-dessus :
-
7b88da5c8023f780e054211294eef2fcUtilisé pour la défense contre les attaques inter-domaines ;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 Introduire les styles ;
2e4c03ba1a844f9ccaa1fdeb1b48713f comme conteneur pour les composants Vue.js
f669a2fb010860baaa34b3e329e9ddc3221b1c12d55f36f2f35a10b7602d99ce est le composant Vue.js. <p></p>
<p>Ensuite, créez un nouveau dossier composants dans le répertoire resources/js/ et créez-y un nouveau fichier SampleComponent.vue. Ce fichier est un composant Vue à fichier unique qui sera rendu dans le fichier vue.blade.php. Le code est le suivant : </p><pre class='brush:php;toolbar:false;'>npm run dev</pre><p>Dans le code ci-dessus : </p>
<ul>
<li>La balise <code>d477f9ce7bf77f53fbcf36bec1b69b7a est utilisée pour insérer un modèle HTML ;
3f1c4e4b6b16bbbd69b2ee476dc4f83a ; est utilisé pour insérer du code JavaScript, exporter le composant à fichier unique Vue via l'exportation par défaut ; c9ccee2e6ea535a969eb3f532ad9fe89 est utilisée pour insérer le style du composant à fichier unique. 6. Utilisez le composant Vue.js dans le modèle Blade
Après avoir terminé les étapes ci-dessus, vous pouvez utiliser le composant Vue.js dans le modèle Blade pour ajouter le code suivant :
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( ' dans le code ci-dessus index.vue') fait référence au modèle vue.blade.php qui vient d'être créé, @section('content') spécifie la position de rendu du composant Vue.js , via example -component spécifie le nom du composant à appeler.
php think run🎜8. Intégrez Vue.js🎜🎜Après avoir intégré Laravel Mix dans le projet ThinkPHP, l'étape suivante consiste à intégrer Vue.js. Les dépendances Laravel Mix et Lodash.debounce sont utilisées ici : 🎜rrreee🎜Dans le code ci-dessus : 🎜🎜🎜.vue({ version : 2 }) est utilisé pour indiquer au projet Laravel Mix d'utiliser la version de. Vue.js ; 🎜🎜.babel () est utilisé pour exécuter Vue.js dans IE8 ; 🎜🎜.webpackConfig() est utilisé pour ajouter d'autres règles et éléments de configuration au constructeur. 🎜🎜🎜9. Prêt🎜🎜Après avoir terminé toutes les étapes ci-dessus, vous pouvez utiliser avec succès Vue.js dans les projets ThinkPHP. Exécutez la commande suivante pour démarrer le serveur local et voir l'effet : 🎜rrreee🎜Voici quelques méthodes et étapes pour utiliser Vue.js dans ThinkPHP. Sur cette base, vous pouvez également résoudre des problèmes plus complexes grâce à une configuration plus détaillée, comme la transmission de données via API, la configuration du routage, etc. J'espère que les méthodes ci-dessus pourront vous aider dans votre pratique. 🎜
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!