laravel內建了vue嗎-Laravel-PHP中文網

laravel內建了vue嗎

首頁

php框架

Laravel

laravel內建了vue嗎

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Sep 01, 2022 pm 05:09 PM

laravel

laravel沒有內建vue；laravel是使用PHP語言編寫的網頁程式開發框架，而vue則是用於建立使用者介面的開源JavaScript框架，可以在laravel中部署vue，但是laravel中並不存在內建vue。

laravel內建了vue嗎

本文操作環境：Windows10系統、Laravel9版、Dell G3電腦。

laravel內建了vue嗎

Laravel 是使用 PHP 語言編寫的網頁程式開發框架，目的是為開發者提供常用元件，簡化網頁程式的開發。只要編寫較少的程式碼，就能實現其他程式語言或框架難以企及的功能。經驗豐富的 PHP 程式設計師會發現，Laravel 讓程式開發變得更有樂趣。

vue是一個用於創建使用者介面的開源JavaScript框架，也是一個創建單頁應用的Web應用框架；Vue所關注的核心是MVC模式中的視圖層，同時，它也能方便地取得資料更新，並透過元件內部特定的方法實現視圖與模型的交互作用。

Laravel

Laravel 是一套富有表達性且具有簡潔語法的網頁應用程式架構。我們認為開發過程應該是愉悅且有創意的體驗。 Laravel 努力減少開發過程中的不便，因此我們提供了驗證(authentication)、路由(routing)、sessions、快取(caching)等開發過程中常用到的工具或功能。

Laravel 目標是為開發者創造一個愉快的開發過程，並且不犧牲應用程式的功能性。快樂的開發者才能創造出最棒的程式碼。為了這個目的，我們竭取了各框架的優點集中到 Laravel 中，這些框架包括不限於 Ruby on Rails、ASP.NET MVC 和 Sinatra 等。

vue

Vue.js（/vjuː/，或簡稱Vue）是一個用於建立使用者介面的開源JavaScript框架，也是一個建立單頁應用的Web應用框架。 2016年一項針對JavaScript的調查表明，Vue有著89%的開發者滿意度。在GitHub上，該專案平均每天能收穫95顆星，為Github有史以來星標數第3多的專案。

Vue.js是一款流行的JavaScript前端框架，旨在更好地組織與簡化Web開發。 Vue所關注的核心是MVC模式中的視圖層，同時，它也能方便地取得資料更新，並透過元件內部特定的方法實現視圖與模型的交互作用。

怎麼在Laravel中部署vue

#創建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>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>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('/hello','/hello');

修改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');});

#【相關推薦：laravel影片教學】

以上是laravel內建了vue嗎的詳細內容。更多資訊請關注PHP中文網其他相關文章！

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

熱AI工具

熱工具

熱門話題

gmail信箱登陸入口在哪裡

7494

CakePHP 教程

1377

steam的賬戶名稱是什麼格式

win11激活密鑰永久

NYT連接提示和答案

Related knowledge

Laravel和CodeIgniter的最新版本對比 Jun 05, 2024 pm 05:29 PM

Laravel9和CodeIgniter4的最新版本提供了更新的功能和改進。 Laravel9採用MVC架構，提供資料庫遷移、驗證及模板引擎等功能。 CodeIgniter4採用HMVC架構，提供路由、ORM和快取。在性能方面，Laravel9的基於服務提供者設計模式和CodeIgniter4的輕量級框架使其具有出色的性能。在實際應用中，Laravel9適用於需要靈活性和強大功能的複雜項目，而CodeIgniter4適用於快速開發和小型應用程式。

Laravel 和 CodeIgniter 中資料處理能力的比較如何？ Jun 01, 2024 pm 01:34 PM

比較Laravel和CodeIgniter的資料處理能力：ORM：Laravel使用EloquentORM，提供類別物件關係映射，而CodeIgniter使用ActiveRecord，將資料庫模型表示為PHP類別的子類別。查詢建構器：Laravel具有靈活的鍊式查詢API，而CodeIgniter的查詢建構器更簡單，基於陣列。資料驗證：Laravel提供了一個Validator類，支援自訂驗證規則，而CodeIgniter的驗證功能內建較少，需要手動編碼自訂規則。實戰案例：用戶註冊範例展示了Lar

Laravel - Artisan 指令 Aug 27, 2024 am 10:51 AM

Laravel - Artisan 指令 - Laravel 5.7 提供了處理和測試新指令的新方法。它包括測試 artisan 命令的新功能，下面提到了演示？

Laravel 和 CodeIgniter 對於初學者來說哪一個比較友善？ Jun 05, 2024 pm 07:50 PM

對於初學者來說，CodeIgniter的學習曲線更平緩，功能較少，但涵蓋了基本需求。 Laravel提供了更廣泛的功能集，但學習曲線稍陡。在性能方面，Laravel和CodeIgniter都表現出色。 Laravel有更廣泛的文件和活躍的社群支持，而CodeIgniter更簡單、輕量級，具有強大的安全功能。在建立部落格應用程式的實戰案例中，Laravel的EloquentORM簡化了資料操作，而CodeIgniter需要更多的手動配置。

Laravel和CodeIgniter：哪種框架更適合大型專案？ Jun 04, 2024 am 09:09 AM

在選擇大型專案框架時，Laravel和CodeIgniter各有優勢。 Laravel針對企業級應用程式而設計，提供模組化設計、相依性注入和強大的功能集。 CodeIgniter是一款輕量級框架，更適合小型到中型項目，強調速度和易用性。對於具有複雜需求和大量用戶的大型項目，Laravel的強大功能和可擴展性更為合適。而對於簡單專案或資源有限的情況下，CodeIgniter的輕量級和快速開發能力則較為理想。