Laravelでvueをデプロイする方法を詳しく解説

藏色散人
リリース: 2021-10-28 15:49:27
転載
8043 人が閲覧しました

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!

コマンド ラインを開いて、プロジェクトの 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 &#39;vue&#39;
import VueRouter from &#39;vue-router&#39;
Vue.use(VueRouter)
export default new VueRouter({
    saveScrollPosition: true,
    routes: [
        {
            name: "hello",
            path: &#39;/&#39;,
            component: resolve =>void(require([&#39;../components/HelloComponent.vue&#39;], 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(&#39;./bootstrap&#39;);
window.Vue = require(&#39;vue&#39;);
import Vue from &#39;vue&#39;
import App from &#39;./hello.vue&#39;
import router from &#39;./router/hello.js&#39;
const app = new Vue({
    el: &#39;#app&#39;,
    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(&#39;js/manifest.js&#39;) }}"></script>
    <script src="{{ mix(&#39;js/vendor.js&#39;) }}"></script>
    <script src="{{ mix(&#39;js/hello.js&#39;) }}"></script>
</body>
</html>
ログイン後にコピー

/resources/routes/web.php に新しいルートを追加します。コードは次のとおりです。

Route::view(&#39;/hello&#39;,&#39;/hello&#39;);
ログイン後にコピー

webpack.mix.jsを変更すると、コードは次のようになります。

mix.js(&#39;resources/assets/js/app.js&#39;, &#39;public/js&#39;)
   .js(&#39;resources/assets/js/hello.js&#39;, &#39;public/js&#39;)
   .extract([&#39;vue&#39;, "vue-router", "axios"])
   .sass(&#39;resources/assets/sass/app.scss&#39;, &#39;public/css&#39;);
ログイン後にコピー

保存後、コマンド ラインのプロジェクト ディレクトリで 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');});

最後に

#npm を実行すると、Write EIO エラーが表示されることがあります。 , おそらくコーディングの問題が原因です。このとき、管理者としてコマンド ライン ファイルを実行するか、chcp 850 を実行してアクティブなコード ページ番号を設定できます。laravel で Vue をデプロイするチュートリアルは基本的に終了です。 Vue の作成について詳しく知りたい場合は、コンポーネントの情報については、Vue のドキュメントを参照してください。

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

関連ラベル:
ソース:juejin.im
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート