ホームページ >PHPフレームワーク >ThinkPHP >thinkphp で vue を使用する方法

thinkphp で vue を使用する方法

王林オリジナル: 2023-05-28 22:30:071497ブラウズ

Web テクノロジーの継続的な発展に伴い、フロントエンドとバックエンドの分離がトレンドになっています。フロントエンドフレームワーク Vue.js は現在ますます人気が高まっていますが、ThinkPHP で Vue を使用するにはどうすればよいでしょうか?この記事では、ThinkPHP5.1 フレームワークを使用して Vue.js を統合する方法を紹介します。

1. Node.js のインストール

始める前に、Node.js 環境がインストールされていることを確認してください。まだインストールされていない場合は、公式 Web サイトにアクセスしてダウンロードしてインストールしてください。

2. 新しいプロジェクトを作成します

Composer コマンドを使用して、ターミナルに次のコマンドを入力します:

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

上記のコマンドを実行すると、myapp フォルダーが生成されます現在のパス内。次に、次のコマンドを実行してディレクトリに入り、ThinkPHP の依存関係をインストールします。

cd myapp
composer install

3. フロントエンドの依存関係をインストールします

myapp ディレクトリに入ったことを確認した後、コマンドに次の指示を入力します。必要なフロントエンドの依存関係をインストールするための行ツール:

npm install

インストールが完了すると、myapp ディレクトリの下の node_modules フォルダーに正常にインストールされた依存関係パッケージを確認できます。

4. 設定 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');

上記のコードの機能は次のとおりです:

エントリファイル resource/js/app.js とリソースコンパイル出力パス public/js
Sass エントリファイルパス resource/sass/app.scss を指定します。コンパイル出力パス public /css

ちなみに、Laravel Mix は Webpack と他のビルドツールを組み合わせてフロントエンドのワークフローを統合するツールです。

5. Vue.js コンポーネントの作成

Vue.js コンポーネントの作成を開始する前に、まず resource/views ディレクトリを作成し、その下に新しいフォルダーインデックスを作成する必要があります。インデックスファイルフォルダー内に 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>

上記のコード:

fe618805dc36f9a56b9e8087d33d17cc クロスドメイン攻撃防御に使用;
cb4723489a7fcd4566e660a234563d9a スタイルの紹介;
2e4c03ba1a844f9ccaa1fdeb1b48713f Vue のコンテナとして。 js コンポーネント;
f669a2fb010860baaa34b3e329e9ddc39711b247f42f43ca3168f4ff0acf0adf は Vue.js コンポーネントです。

次に、resources/js/ ディレクトリに新しいフォルダーコンポーネントを作成し、その中に新しい ExampleComponent.vue ファイルを作成します。このファイルは、vue.blade.php ファイルにレンダリングされる Vue 単一ファイルコンポーネントです。コードは次のとおりです:

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

上記のコード:

タグは HTML テンプレートを挿入するために使用されます。 &lt ;script> タグは、JavaScript コードを挿入し、エクスポートデフォルトを介して Vue 単一ファイルコンポーネントをエクスポートするために使用されます。
c9ccee2e6ea535a969eb3f532ad9fe89 タグが使用されます。単一ファイルコンポーネントのスタイルを挿入します。
6. 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 で描画位置を指定し、呼び出されるコンポーネント名を指定します。 7. フロントエンドコードをコンパイルする以下のコマンドを実行してコンパイルすると、public/js/app.js と public/css/app.css が自動生成されます。この効果は、パブリックディレクトリ内の HTML ファイルを通じて確認できます。

npm run dev

8. 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 を実行するために使用されます;

9.準備完了
上記の手順をすべて完了すると、ThinkPHP プロジェクトで Vue.js を正常に使用できるようになります。次のコマンドを実行してローカルサーバーを起動し、効果を確認します。

php think run

上記は、ThinkPHP で Vue.js を使用するためのいくつかの方法と手順です。これに基づいて、API を介したデータの送信やルーティングの構成など、より詳細な構成を通じてより複雑な問題を解決することもできます。上記の方法があなたの実践に役立つことを願っています。

以上がthinkphp で vue を使用する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：js が thinkphp5 データと対話する方法次の記事：js が thinkphp5 データと対話する方法

続きを見る