詳解怎麼在Laravel部署vue-Laravel-PHP中文網

首頁

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檔案。

相關推薦：最新的五個Laravel影片教學、最新的5個vue.js影片教學精選

創建laravel

首先，你要有一個composer,然後，你便有了一個laravel。執行指令composer create-project --prefer-dist laravel/laravel blog建立一個新的laravel專案（具體建立laravel請到官網學習）。

Hello world!

打開命令列，進入你的專案內cd blog

在開始前，由於各種你懂得原因，npm作為國外的node倉庫安裝工具，操作的時候可能會發生速度慢等各種問題，一般推薦用taobao源進行加速,後面代碼同樣加上後綴即可，下載項目默認依賴，代碼如下。

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下新資料夾router,並在裡面新建hello.js,並透過巢狀路由設定將hello路由對應到剛剛新建立的HellowComponent元件當中，程式碼如下。

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,進行重新編譯

可以在命令列中本項目目錄下輸入php artisan serve,訪問http:// 127.0.0.1:8000/hello即可看到效果

laravel5.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中文網其他相關文章！

陳述

本文轉載於：juejin。如有侵權，請聯絡admin@php.cn刪除

Laravel的多功能性：從簡單站點到復雜系統Apr 13, 2025 am 12:13 AM

選擇Laravel開發項目是因為其靈活性和強大功能適應不同規模和復雜度的需求。 Laravel提供路由系統、EloquentORM、Artisan命令行等功能，支持從簡單博客到復雜企業級系統的開發。

Laravel（PHP）與Python：開發環境和生態系統Apr 12, 2025 am 12:10 AM

Laravel和Python在開發環境和生態系統上的對比如下：1.Laravel的開發環境簡單，僅需PHP和Composer，提供了豐富的擴展包如LaravelForge，但擴展包維護可能不及時。 2.Python的開發環境也簡單，僅需Python和pip，生態系統龐大，涵蓋多個領域，但版本和依賴管理可能複雜。

Laravel和後端：為Web應用程序提供動力邏輯Apr 11, 2025 am 11:29 AM

Laravel是如何在後端邏輯中發揮作用的？它通過路由系統、EloquentORM、認證與授權、事件與監聽器以及性能優化來簡化和增強後端開發。 1.路由系統允許定義URL結構和請求處理邏輯。 2.EloquentORM簡化數據庫交互。 3.認證與授權系統便於用戶管理。 4.事件與監聽器實現松耦合代碼結構。 5.性能優化通過緩存和隊列提高應用效率。

為什麼Laravel如此受歡迎？Apr 02, 2025 pm 02:16 PM

Laravel受歡迎的原因包括其簡化開發過程、提供愉快的開發環境和豐富的功能。 1)它吸收了RubyonRails的設計理念，結合PHP的靈活性。 2)提供瞭如EloquentORM、Blade模板引擎等工具，提高開發效率。 3)其MVC架構和依賴注入機制使代碼更加模塊化和可測試。 4)提供了強大的調試工具和性能優化方法，如緩存系統和最佳實踐。

django或laravel哪個更好？Mar 28, 2025 am 10:41 AM

Django和Laravel都是全棧框架，Django適合Python開發者和復雜業務邏輯，Laravel適合PHP開發者和優雅語法。 1.Django基於Python，遵循“電池齊全”哲學，適合快速開發和高並發。 2.Laravel基於PHP，強調開發者體驗，適合小型到中型項目。

哪個是更好的PHP或Laravel？Mar 27, 2025 pm 05:31 PM

PHP和Laravel不是直接可比的，因為Laravel是基於PHP的框架。 1.PHP適合小型項目或快速原型開發，因其簡單直接。 2.Laravel適合大型項目或高效開發，因其提供豐富功能和工具，但學習曲線較陡，性能可能不如純PHP。

Laravel是前端還是後端？Mar 27, 2025 pm 05:31 PM

laravelisabackendframeworkbuiltonphp，設計ForweBapplicationDevelopment.itfocusessonserver-sideLogic，databasemagemention和Applicationstructure和CanBeintegratedWithFrontendTechnologiesLikeLikeVue.jsorreActeReacterVue.jsorreActforforfull-stackDevefloct。