laravel內(nèi)置了vue嗎

laravel沒有內(nèi)置vue；laravel是使用php語言編寫的網(wǎng)頁程序開發(fā)框架，而vue是一個(gè)用于創(chuàng)建用戶界面的開源JavaScript框架，可以在laravel中部署vue，但是laravel中并不存在內(nèi)置vue。

本文操作環(huán)境：Windows10系統(tǒng)、Laravel9版、Dell G3電腦。

laravel內(nèi)置了vue嗎

Laravel 是使用 PHP 語言編寫的網(wǎng)頁程序開發(fā)框架，目的是為開發(fā)者提供常用組件，簡化網(wǎng)頁程序的開發(fā)。只需編寫較少的代碼，就能實(shí)現(xiàn)其他編程語言或框架難以企及的功能。經(jīng)驗(yàn)豐富的 PHP 程序員會(huì)發(fā)現(xiàn)，Laravel 讓程序開發(fā)變得更有樂趣。

vue是一個(gè)用于創(chuàng)建用戶界面的開源JavaScript框架，也是一個(gè)創(chuàng)建單頁應(yīng)用的Web應(yīng)用框架；Vue所關(guān)注的核心是mvc模式中的視圖層，同時(shí)，它也能方便地獲取數(shù)據(jù)更新，并通過組件內(nèi)部特定的方法實(shí)現(xiàn)視圖與模型的交互。

Laravel?

立即學(xué)習(xí)“前端免費(fèi)學(xué)習(xí)筆記（深入）”；

Laravel 是一套富有表達(dá)性且具有簡潔語法的網(wǎng)頁應(yīng)用程序框架。我們認(rèn)為開發(fā)過程應(yīng)該是愉悅且有創(chuàng)造性的體驗(yàn)。Laravel 努力減少開發(fā)過程中的不便，因此我們提供了驗(yàn)證(authentication)、路由(routing)、sessions、緩存(caching)等開發(fā)過程中經(jīng)常用到的工具或功能。

Laravel 目標(biāo)是給開發(fā)者創(chuàng)造一個(gè)愉快的開發(fā)過程，并且不犧牲應(yīng)用程序的功能性。快樂的開發(fā)者才能創(chuàng)造最棒的代碼。為了這個(gè)目的，我們竭取了各框架的優(yōu)點(diǎn)集中到 Laravel 中，這些框架包括并不局限于 ruby on Rails、ASP.net MVC 和 Sinatra 等。

vue

Vue.JS（/vju?/，或簡稱為Vue）是一個(gè)用于創(chuàng)建用戶界面的開源JavaScript框架，也是一個(gè)創(chuàng)建單頁應(yīng)用的Web應(yīng)用框架。 2016年一項(xiàng)針對JavaScript的調(diào)查表明，Vue有著89%的開發(fā)者滿意度。在github上，該項(xiàng)目平均每天能收獲95顆星，為Github有史以來星標(biāo)數(shù)第3多的項(xiàng)目。

vue.js是一款流行的JavaScript前端框架，旨在更好地組織與簡化Web開發(fā)。Vue所關(guān)注的核心是MVC模式中的視圖層，同時(shí)，它也能方便地獲取數(shù)據(jù)更新，并通過組件內(nèi)部特定的方法實(shí)現(xiàn)視圖與模型的交互。

怎么在Laravel中部署vue

創(chuàng)建laravel

首先，你要有一個(gè)composer,然后，你便有了一個(gè)laravel。 運(yùn)行命令composer create-project –prefer-dist laravel/laravel blog創(chuàng)建一個(gè)新的laravel項(xiàng)目（具體創(chuàng)建laravel請到官網(wǎng)學(xué)習(xí)）。

Hello world!

打開命令行，進(jìn)入你的項(xiàng)目內(nèi)cd blog

在開始前，由于各種你懂得原因，npm作為國外的node倉庫安裝工具，操作的時(shí)候可能會(huì)發(fā)生速度慢等各種問題，一般推薦用taobao源進(jìn)行加速,后面代碼同樣加上后綴即可，下載項(xiàng)目默認(rèn)依賴，代碼如下。

npm?install??--registry=https://registry.npm.taobao.org

下載vue路由管理，代碼如下。

npm?install?vue-router?--save-dev

在/resources/assets/js/components中新建一個(gè)HelloComponent.vue自定義組件文件，代碼如下。

<template> ????<div> ????????<h1>Hello?World!</h1> ????</div> </template><script>     export default{         data(){             return {             }         }     } </script>

在/resources/assets/js下新建文件夾router,并在里面新建hello.js,并通過嵌套路由配置將hello路由映射到剛剛新創(chuàng)建的HellowComponent組件當(dāng)中，代碼如下。

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)) ????????}, ????] })

在當(dāng)前l(fā)aravel項(xiàng)目中/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，代碼如下。

nbsp;html&gt;   ????<meta> ????<meta> ????<title>Hello</title> ????<div></div> ????<script></script> ????<script></script> ????<script></script>

在/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');

保存后在命令行中本項(xiàng)目目錄下執(zhí)行npm run watch,進(jìn)行重新編譯

可以在命令行中本項(xiàng)目目錄下輸入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’);});

【相關(guān)推薦：laravel視頻教程】

以上就是