Comment utiliser vue dans thinkphp-PensezPHP-php.cn

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

Copier après la connexion

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

Copier après la connexion

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

Copier après la connexion

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');

Copier après la connexion

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>

Copier après la connexion

Dans le code ci-dessus :

<meta name="csrf-token" content="{{ csrf_token. () }}" > Utilisé pour la défense contre les attaques inter-domaines ; <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>

Copier après la connexion

以上代码中：

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

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

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

@extends('index.vue')

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

Copier après la connexion

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

<link rel="stylesheet" href="{{ mix('css/app.css') }}" /> Introduire les styles ;

<div id="app"> comme conteneur pour les composants Vue.js

< ;/example-component>< /code> est le composant Vue.js. 
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 : 
npm run dev
Copier après la connexion
Dans le code ci-dessus : 
La balise <template> est utilisée pour insérer un modèle HTML ; 
La balise <script> ; est utilisé pour insérer du code JavaScript, exporter le composant à fichier unique Vue via l'exportation par défaut ; 
La balise <style> 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
      }
    }
  });
}
Copier après la connexion
@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. 
🎜7. Compilez le code frontal🎜🎜Lorsque vous exécutez la commande suivante pour compiler, public/js/app.js et public/css/app.css seront automatiquement générés. L'effet peut être vu via le fichier HTML dans le répertoire public. 🎜php think run
Copier après la connexion
🎜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!