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

ホームページ

PHPフレームワーク

Laravel

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

藏色散人

Oct 28, 2021 pm 03:48 PM

laravelvue

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 id="Hello-nbsp-World">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 id="Hello">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で複製されています。侵害がある場合は、admin@php.cn までご連絡ください。

Laravel（PHP）vs。Python：異なるユースケースとアプリケーションApr 18, 2025 am 12:16 AM

LaravelまたはPythonの選択は、プロジェクトの要件に依存します。1）Webアプリケーションをすばやく開発し、ORMと認証システムを使用する必要がある場合は、Laravelを選択します。 2）データ分析、機械学習、または科学的コンピューティングが含まれる場合は、Pythonを選択します。

LaravelとPython：適切なツールを見つけるApr 18, 2025 am 12:14 AM

LaravelはWebアプリケーションを迅速に構築するのに適しており、Pythonは柔軟性と汎用性を必要とするプロジェクトに適しています。 1）Laravelは、PHPエコシステムに適したORMやルーティングなどの豊富な機能を提供します。 2）Pythonは、簡潔な構文と強力なライブラリエコシステムで知られており、Web開発やデータサイエンスなどのフィールドに適しています。

LaravelとPHP：動的なWebサイトの作成Apr 18, 2025 am 12:12 AM

LaravelとPHPを使用して、動的なWebサイトを効率的に楽しく作成します。 1）LaravelはMVCアーキテクチャに従い、ブレードテンプレートエンジンはHTMLの書き込みを簡素化します。 2）ルーティングシステムと要求処理メカニズムにより、URL定義とユーザー入力処理が簡単になります。 3）Eloquentormはデータベース操作を簡素化します。 4）データベースの移行、CRUD操作、ブレードテンプレートの使用は、ブログシステムの例を介して実証されています。 5）Laravelは、強力なユーザー認証と承認機能を提供します。 6）デバッグスキルには、ロギングシステムと職人ツールの使用が含まれます。 7）パフォーマンスの最適化の提案には、怠zyなロードとキャッシュが含まれます。

Laravelとフルスタック：フロントとバックを一緒にApr 18, 2025 am 12:07 AM

Laravelは、ブレードテンプレートエンジン、Eloquentorm、Artisan Tools、Laravelmixを介してフルスタック開発を実現します。1。ブレードは、フロントエンド開発を簡素化します。 2. Eloquentはデータベース操作を簡素化します。 3。職人は開発効率を向上させます。 4。Laravelmixは、フロントエンドリソースを管理します。

Laravel：現代のWeb開発のためのフレームワークApr 18, 2025 am 12:05 AM

Laravelは、MVCアーキテクチャモデルに従い、豊富なツールと機能を提供し、Web開発プロセスを簡素化する最新のPHPベースのフレームワークです。 1）データベースインタラクション用のEloquentorm、2）高速コード生成のための職人コマンドラインインターフェイス、3）効率的なビュー開発のためのブレードテンプレートエンジン、4）URL構造を定義するための強力なルーティングシステム、5）ユーザー管理のための認証システム、6）リアルタイム機能のためのイベントリスニングとブロードキャスト、7）パフォーマンスを維持するためのパフォーマンスを維持します。

Laravel（PHP）vs。Python：長所と短所を計量しますApr 17, 2025 am 12:18 AM

LaravelはWebアプリケーションを迅速に構築するのに適していますが、Pythonはより広い範囲のアプリケーションシナリオに適しています。 1.Laravelは、Web開発を簡素化するために、Eloquentorm、Bladeテンプレートエンジン、職人ツールを提供します。 2。Pythonは、その動的なタイプ、リッチ標準ライブラリ、サードパーティのエコシステムで知られており、Web開発、データサイエンス、その他の分野に適しています。

Laravel vs. Python：フレームワークとライブラリの比較Apr 17, 2025 am 12:16 AM

LaravelとPythonにはそれぞれ独自の利点があります。Laravelは、機能が豊富なWebアプリケーションを迅速に構築するのに適しており、Pythonはデータサイエンスと一般的なプログラミングの分野でうまく機能します。 1.Laravelは、最新のWebアプリケーションの構築に適したEloquentormおよびBladeテンプレートエンジンを提供します。 2。Pythonには豊富な標準的な図書館とサードパーティライブラリがあり、DjangoとFlaskのフレームワークはさまざまな開発ニーズを満たしています。

Laravelの目的：堅牢でエレガントなWebアプリケーションの構築Apr 17, 2025 am 12:13 AM

Laravelは、コード構造を明確にし、開発プロセスをより芸術的にすることができるため、選択する価値があります。 1）LaravelはPHPに基づいており、MVCアーキテクチャに従い、Web開発を簡素化します。 2）Eloquentorm、Artisan Tools、Bladeテンプレートなどのコア機能は、開発の優雅さと堅牢性を高めます。 3）ルーティング、コントローラー、モデル、ビューを通じて、開発者はアプリケーションを効率的に構築できます。 4）キューやイベントモニタリングなどの高度な機能により、アプリケーションのパフォーマンスがさらに向上します。

See all articles

ホットAIツール

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

WebStorm Mac版

便利なJavaScript開発ツール

SublimeText3 Mac版

神レベルのコード編集ソフト（SublimeText3）

DVWA

Damn Vulnerable Web App (DVWA) は、非常に脆弱な PHP/MySQL Web アプリケーションです。その主な目的は、セキュリティ専門家が法的環境でスキルとツールをテストするのに役立ち、Web 開発者が Web アプリケーションを保護するプロセスをより深く理解できるようにし、教師/生徒が教室環境で Web アプリケーションを教え/学習できるようにすることです。安全。 DVWA の目標は、シンプルでわかりやすいインターフェイスを通じて、さまざまな難易度で最も一般的な Web 脆弱性のいくつかを実践することです。このソフトウェアは、