thinkphp で vue を使用する方法-ThinkPHP-php.cn

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

ログイン後にコピー

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

ちなみに、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>

ログイン後にコピー

上記のコード:

クロスドメイン攻撃防御に使用;
スタイルの紹介;
Vue のコンテナとして。 js コンポーネント;
は 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>

ログイン後にコピー

上記のコード: