laravel內建了vue嗎

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

如何快速入門VUE3.0：進入學習

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

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

可以在命令列中本專案目錄下輸入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內建了vue嗎的詳細內容，更多請關注TW511.COM其它相關文章！