Laravel には組み込みの vue がありません。laravel は PHP 言語で書かれた Web プログラム開発フレームワークであり、vue はユーザー インターフェイスを作成するためのオープン ソースの JavaScript フレームワークです。Vue は laravel にデプロイできますが、 laravelの組み込みvueには存在しません。
#この記事の動作環境: Windows 10 システム、Laravel バージョン 9、Dell G3 コンピューター。
Laravel は、PHP 言語で書かれた Web プログラム開発フレームワークであり、開発者に共通のコンポーネントを提供し、Web プログラムの開発を簡素化することを目的としています。記述するコードを少なくすることで、他のプログラミング言語やフレームワークでは実現が難しい機能を実現できます。経験豊富な PHP プログラマーは、Laravel を使用するとプログラム開発がより楽しくなることがわかるでしょう。
vue は、ユーザー インターフェイスを作成するためのオープン ソースの JavaScript フレームワークであり、シングル ページ アプリケーションを作成するための Web アプリケーション フレームワークです。Vue のコアは、MVC パターンのビュー層です。同時に、コンポーネント内の特定のメソッドを通じて、データ更新を簡単に取得し、ビューやモデルと対話します。
Laravel
Laravel は、簡潔な構文を備えた表現力豊かな Web アプリケーション フレームワークです。私たちは、開発プロセスは楽しく創造的な経験であるべきだと信じています。 Laravelでは、開発プロセスにおける不便さを軽減するよう努めており、認証、ルーティング、セッション、キャッシュなど、開発プロセスで頻繁に使用されるツールや機能を提供しています。
Laravel の目標は、アプリケーションの機能を犠牲にすることなく、開発者にとって快適な開発プロセスを作成することです。幸せな開発者は最高のコードを作成します。この目的のために、Ruby on Rails、ASP.NET MVC、Sinatra などのさまざまなフレームワークの利点を活用し、Laravel に集約しました。
vue
Vue.js (/vjuː/、または単に Vue) は、ユーザー インターフェイスとシングルページ アプリケーションを作成するためのオープン ソースの JavaScript フレームワークです。フレームワーク。 2016 年の JavaScript 調査では、Vue の開発者の満足度は 89% でした。 GitHub では、このプロジェクトは 1 日あたり平均 95 個のスターを獲得しており、Github 史上 3 番目に多くのスターを獲得したプロジェクトとなっています。
Vue.js は、Web 開発をより適切に整理し、簡素化するために設計された人気のある JavaScript フロントエンド フレームワークです。 Vue の中心となるのは MVC パターンのビュー層ですが、同時にデータ更新を簡単に取得し、コンポーネント内の特定のメソッドを通じてビューとモデル間の対話を実現することもできます。
Laravel で vue をデプロイする方法
laravel を作成する
まず、コンポーザーが必要です。ララベル。コマンドcomposer create-project --prefer-dist laravel/laravel blogを実行して、新しいlaravelプロジェクトを作成します(laravelの具体的な作成方法については、公式Webサイトにアクセスしてください)。
Hello world!
コマンド ラインを開いてプロジェクト cd ブログを入力します
開始する前に、ご存知のとおり、さまざまな理由により、npm は外部ノード ウェアハウスとしてインストールされます。ツールの動作中に速度が遅いなどの問題が発生する可能性があります。高速化のために通常はタオバオ ソースを使用することをお勧めします。次のコードにサフィックスを追加するだけです。ダウンロードされたプロジェクトはデフォルトの依存関係に依存します。コードは次のとおりです。
npm install --registry=https://registry.npm.taobao.org
vue ルーティング管理をダウンロードします。コードは次のとおりです。
npm install vue-router --save-dev
次のコードを使用して、/resources/assets/js/components に新しい HelloComponent.vue カスタム コンポーネント ファイルを作成します。
<template>
<div>
<h1>Hello World!</h1>
</div>
</template>
<script>
export default{
data(){
return {
}
}
}
</script>/resources/assets/js の下に新しいフォルダー ルーターを作成し、その中に hello.js を作成し、ネストされたルーティング構成を通じて新しく作成された HelloComponent コンポーネントに hello ルートをマップします。コードは次のとおりです。
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
export default new VueRouter({
saveScrollPosition: true,
routes: [
{
name: "hello",
path: '/',
component: resolve =>void(require(['../components/HelloComponent.vue'], resolve))
},
]
})現在のlaravelプロジェクトの/resources/assets/jsの下に、メインインターフェイスとネストされたルーティングビューとして新しいhello.vueを作成します。コードは次のとおりです。
<template>
<div>
<h1>Hello</h1>
<router-view></router-view>
</div>
</template>
<script>
export default{
data(){
return {
}
}
}
</script>次に、/resources/assets/js に hello.js を作成します。コードは次のとおりです。
require('./bootstrap');
window.Vue = require('vue');
import Vue from 'vue'
import App from './hello.vue'
import router from './router/hello.js'
const app = new Vue({
el: '#app',
router,
render: h=>h(App)
});次のコードを使用して、/resources/views の下に新しい hello.blade.php を作成します。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>Hello</title>
</head>
<body>
<div id="app"></div>
<script src="{{ mix('js/manifest.js') }}"></script>
<script src="{{ mix('js/vendor.js') }}"></script>
<script src="{{ mix('js/hello.js') }}"></script>
</body>
</html>/resources/routes/web.php に新しいルートを追加します。コードは次のとおりです。
Route::view('/hello','/hello');
webpack.mix.jsを変更すると、コードは次のようになります。
mix.js('resources/assets/js/app.js', 'public/js') .js('resources/assets/js/hello.js', 'public/js') .extract(['vue', "vue-router", "axios"]) .sass('resources/assets/sass/app.scss', 'public/css');
保存後、コマンド ラインのプロジェクト ディレクトリで npm run watch を実行して再コンパイルします。
コマンド ラインのプロジェクト ディレクトリに phpArtisanserve と入力し、http:// にアクセスします。 127.0.0.1:8000/hello
Laravel 5.5 では Route::view メソッドと Route::redirect メソッドが追加されました。5.4 以前のルートは次のように記述できます Route::get(' /hello', function () {return view('hello');});
[関連する推奨事項: laravel ビデオ チュートリアル ]
以上がlaravelにはvueが組み込まれていますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
