Web アプリの開発では、vuejs というツールが広く使用されています。この記事では、vuejs をインストールして Laravel で使用する方法を説明します。 Vue.js フレームワークは defi仁藤 プログレッシブフレームワーク HTML ビューの作成に特化しており、他のライブラリやプロジェクトのコンポーネントと簡単に統合できるためです。
Vue.js の成功は、次の選択によるものでもあります。 ララベル これをフロントエンド フレームワークとして提案し、バージョン 2.0 のリリースに至りました。
もちろん、最初のステップは Laravel で新しいプロジェクトを作成することです。 コンピューターにある場合は、それを使用するか、このチュートリアル用に新しいものを作成できます。
composer create-project laravel/laravel guide-laravel-vueプロジェクトが開始されたら、インストールする必要があります。 npm 中毒。 これを行うには、プロジェクト ディレクトリ内で次のコマンドを実行します。
npm install依存関係がインストールされたら、次のコマンドを実行してリソースを構築し、すべてが実際に機能することを確認します。
npm run devコマンド npm run dev 特に、さまざまなチェックとビルドを実行します Laravel Mix ファイルをコンパイルする resources/js/app.js とファイル resources/css/app.css ファイルで public/js/app.js e public/css/app.css.
終了すると、すべてが正常に機能すると、次のように表示されます。
Laravel プロジェクトを準備したら、Vue.js 3 のインストールに進むことができます。これを行うには、プロジェクト ディレクトリで次のコマンドを実行します。
npm install --save-dev vueこれにより、Vue.js が開発依存関係の XNUMX つとしてインストールされます。 アセットをコンパイルすると、本番 JavaScript ファイルは自己完結型になるため、Vue.js を開発依存関係としてインストールするだけで済みます。
Vue 3 が正しくインストールされたことを確認するには、ファイルを開きます package.json (プロジェクト ルートに存在) を検索し、 "vue" セクションの "devDependencies":
// package.json
{
"private": true,
"scripts": {
"dev": "npm run development",
"development": "mix",
"watch": "mix watch",
"watch-poll": "mix watch -- --watch-options-poll=1000",
"hot": "mix watch --hot",
"prod": "npm run production",
"production": "mix --production"
},
"devDependencies": {
"axios": "^0.21",
"laravel-mix": "^6.0.6",
"lodash": "^4.17.19",
"postcss": "^8.1.14",
"vue": "^3.2.37"
}
}ご覧のとおり、バージョン番号は Vue.js 3 がインストールされていることを示しています。
welcome.blade.php ファイルに次のコードを追加します。
<div id="vue-app">
{{ text }}
</div>
<script>
window.vueApp = new Vue({
el: '#vue-app',
data: {
text: 'Hello World from Vue!'
}
});
</script>ご覧のとおり、要素を作成しました div とともに id 「vue-app”。 script 要素内で Vue のインスタンスを作成し、コンストラクターに次のことを可能にするオブジェクトを渡します。 defiこの場合、データや動作などのいくつかのアプリケーション パラメータを指定します。
div defiHTMLで完成オブジェクトが作成されるとすぐに、 Vue を取得します div とともに id vue-app プレースホルダーの置き換えを処理します {{ text }} データオブジェクトに含まれる値で。 もちろん、このオブジェクトには複数のプロパティを含めることができます。タイプが異なっていてもかまいません。数値、配列、およびその他のネストされたオブジェクトは有効です。
この置き換えに加えて、Vue はそのエンジンもアクティブ化し、アプリケーションをレスポンシブにしました。つまり、テキスト プロパティを変更すると、HTML 内の対応する要素が即座に更新されます。
XNUMX 回目のトライアルに進むには、最初にアプリをインスタンス化して新しいコンポーネントを作成する必要があります。 あなたは開ける resources/app.js (o resources/js/app.js) を開き、次のようにその内容を更新します。
// resources/app.js
require('./bootstrap');
import { createApp } from 'vue';
import HelloVue from '../components/HelloVue.vue';
createApp({
components: {
HelloVue,
}
}).mount('#app');このファイルでは、新しい Vue.js インスタンスを作成しています。これを行うには、HelloVue.vue と呼ばれる Vue コンポーネントが必要です。 詳細については 公式文書を参照してください .
新しいファイルを作成する resources/components/HelloVue.vue 次のコードを入力します。
// resources/components/HelloVue.vue
<template>
<h1>Hello Vue!</h1>
</template>
<script>
export default {
name: 'HelloVue'
}
</script>作成したばかりのファイルは、印刷する基本的な Vue.js コンポーネントです。 Hello Vue! 来ます header1 ページで。 最後に、 webpack.mix.js プロジェクト ルートのファイルを開き、その内容を次のように更新します。
// webpack.mix.js
const mix = require('laravel-mix');
mix.js('resources/js/app.js', 'public/js')
.vue({
version: 3,
})
.postCss('resources/css/app.css', 'public/css', [
//
]);このファイルでは、メソッド呼び出し .vue() は、Vue.js コードをコンパイルし、本番環境の JavaScript ファイルにバンドルします。 この関数は、次のことができるオブジェクトを受け入れます。 defi使用している Vue.js のバージョンを確認してください。
ファイル編集後 webpack.mix.js JavaScript コードをコンパイルする必要があります。 これを行うには、コマンドを再度実行します npm run dev.
最後に、Vue の操作を試すために、ファイルを開きます resources/views/welcome.blade.php 次のコードを入力します。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Laravel Vue</title>
<script src="{{ asset('js/app.js') }}" defer></script>
</head>
<body>
<div id="app">
<hello-vue />
</div>
</body>
</html>コードは、以前に作成されたコンポーネントとともに、ビデオ メッセージを生成します。 こんにちはビュー！、Vue.jsインスタンスがHTML要素にマウントされているため id app.
を使用してアプリケーションを実行します php artisan serve、お気に入りのブラウザで開きます。
Ercole Palmeri
あなたは下記にもご興味がおありかもしれません ...
先週の月曜日、フィナンシャル・タイムズ紙はOpenAIとの契約を発表した。 FT は世界クラスのジャーナリズムにライセンスを供与しています…