ホームページ >PHPフレームワーク >Laravel >Laravelでvueをデプロイする方法を詳しく解説
Laravel vue 環境のデプロイメント
このチュートリアルでは、Laravel での vue のデプロイメントについて紹介します。Laravel には、Vue ライブラリを使用して最新の JavaScript の記述を簡単に開始できるようにするための基本的なスキャフォールディングがいくつか含まれています。 Vue は、コンポーネントを使用して強力な JavaScript アプリケーションを構築するための表現力豊かな API を提供します。 Laravel Mix を使用すると、JavaScript コンポーネントをブラウザで使用できる JavaScript ファイルに簡単にコンパイルできます。
関連する推奨事項: 最新の 5 つの Laravel ビデオ チュートリアル 、最新の 5 つの vue.js ビデオ チュートリアルのセレクション
laravel を作成する
#まず、コンポーザーが必要で、次に laravel が必要になります。コマンドcomposer create-project --prefer-dist laravel/laravel blogを実行して、新しいlaravelプロジェクトを作成します(laravelの具体的な作成方法については、公式Webサイトにアクセスしてください)。Hello world!
npm install --registry=https://registry.npm.taobao.orgvue ルーティング管理をダウンロードします。コードは次のとおりです。
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/helloLaravel 5.5 では Route::view メソッドと Route::redirect メソッドが追加されました。5.4 以前のルートは次のように記述できます Route::get(' /hello', function () {return view('hello');});
最後に
#npm を実行すると、Write EIO エラーが表示されることがあります。 , おそらくコーディングの問題が原因です。このとき、管理者としてコマンド ライン ファイルを実行するか、chcp 850 を実行してアクティブなコード ページ番号を設定できます。laravel で Vue をデプロイするチュートリアルは基本的に終了です。 Vue の作成について詳しく知りたい場合は、コンポーネントの情報については、Vue のドキュメントを参照してください。以上がLaravelでvueをデプロイする方法を詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。