站長資訊網
laravel沒有內置vue；laravel是使用PHP語言編寫的網頁程序開發框架，而vue是一個用于創建用戶界面的開源JavaScript框架，可以在laravel中部署vue，但是laravel中并不存在內置vue。
如何快速入門VUE3.0：進入學習
本文操作環境：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 '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');});
【
