本文小編為大家詳細(xì)介紹“l(fā)aravel是否內(nèi)置了vue”,內(nèi)容詳細(xì),步驟清晰,細(xì)節(jié)處理妥當(dāng),希望這篇“l(fā)aravel是否內(nèi)置了vue”文章能幫助大家解決疑惑,下面跟著小編的思路慢慢深入,一起來學(xué)習(xí)新知識吧。
讓客戶滿意是我們工作的目標(biāo),不斷超越客戶的期望值來自于我們對這個行業(yè)的熱愛。我們立志把好的技術(shù)通過有效、簡單的方式提供給客戶,將通過不懈努力成為客戶在信息化領(lǐng)域值得信任、有價值的長期合作伙伴,公司提供的服務(wù)項目有:域名與空間、網(wǎng)頁空間、營銷軟件、網(wǎng)站建設(shè)、察隅網(wǎng)站維護(hù)、網(wǎng)站推廣。
laravel沒有內(nèi)置vue;laravel是使用PHP語言編寫的網(wǎng)頁程序開發(fā)框架,而vue是一個用于創(chuàng)建用戶界面的開源JavaScript框架,可以在laravel中部署vue,但是laravel中并不存在內(nèi)置vue。
本文操作環(huán)境:Windows10系統(tǒng)、Laravel9版、Dell G3電腦。
Laravel 是使用 PHP 語言編寫的網(wǎng)頁程序開發(fā)框架,目的是為開發(fā)者提供常用組件,簡化網(wǎng)頁程序的開發(fā)。只需編寫較少的代碼,就能實現(xiàn)其他編程語言或框架難以企及的功能。經(jīng)驗豐富的 PHP 程序員會發(fā)現(xiàn),Laravel 讓程序開發(fā)變得更有樂趣。
vue是一個用于創(chuàng)建用戶界面的開源JavaScript框架,也是一個創(chuàng)建單頁應(yīng)用的Web應(yīng)用框架;Vue所關(guān)注的核心是MVC模式中的視圖層,同時,它也能方便地獲取數(shù)據(jù)更新,并通過組件內(nèi)部特定的方法實現(xiàn)視圖與模型的交互。
Laravel
Laravel 是一套富有表達(dá)性且具有簡潔語法的網(wǎng)頁應(yīng)用程序框架。我們認(rèn)為開發(fā)過程應(yīng)該是愉悅且有創(chuàng)造性的體驗。Laravel 努力減少開發(fā)過程中的不便,因此我們提供了驗證(authentication)、路由(routing)、sessions、緩存(caching)等開發(fā)過程中經(jīng)常用到的工具或功能。
Laravel 目標(biāo)是給開發(fā)者創(chuàng)造一個愉快的開發(fā)過程,并且不犧牲應(yīng)用程序的功能性??鞓返拈_發(fā)者才能創(chuàng)造最棒的代碼。為了這個目的,我們竭取了各框架的優(yōu)點集中到 Laravel 中,這些框架包括并不局限于 Ruby on Rails、ASP.NET MVC 和 Sinatra 等。
vue
Vue.js(/vju?/,或簡稱為Vue)是一個用于創(chuàng)建用戶界面的開源JavaScript框架,也是一個創(chuàng)建單頁應(yīng)用的Web應(yīng)用框架。 2016年一項針對JavaScript的調(diào)查表明,Vue有著89%的開發(fā)者滿意度。在GitHub上,該項目平均每天能收獲95顆星,為Github有史以來星標(biāo)數(shù)第3多的項目。
Vue.js是一款流行的JavaScript前端框架,旨在更好地組織與簡化Web開發(fā)。Vue所關(guān)注的核心是MVC模式中的視圖層,同時,它也能方便地獲取數(shù)據(jù)更新,并通過組件內(nèi)部特定的方法實現(xiàn)視圖與模型的交互。
怎么在Laravel中部署vue
創(chuàng)建laravel
首先,你要有一個composer,然后,你便有了一個laravel。 運行命令composer create-project --prefer-dist laravel/laravel blog創(chuàng)建一個新的laravel項目(具體創(chuàng)建laravel請到官網(wǎng)學(xué)習(xí))。
Hello world!
打開命令行,進(jìn)入你的項目內(nèi)cd blog
在開始前,由于各種你懂得原因,npm作為國外的node倉庫安裝工具,操作的時候可能會發(fā)生速度慢等各種問題,一般推薦用taobao源進(jìn)行加速,后面代碼同樣加上后綴即可,下載項目默認(rèn)依賴,代碼如下。
npm install --registry=https://registry.npm.taobao.org
下載vue路由管理,代碼如下。
npm install vue-router --save-dev
在/resources/assets/js/components中新建一個HelloComponent.vue自定義組件文件,代碼如下。
<template> <div> <h2>Hello World!</h2> </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項目中/resources/assets/js下新建hello.vue,做為主界面,嵌套路由視圖,代碼如下。
<template> <div> <h2>Hello</h2> <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');
保存后在命令行中本項目目錄下執(zhí)行npm run watch,進(jìn)行重新編譯
可以在命令行中本項目目錄下輸入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');})。
讀到這里,這篇“l(fā)aravel是否內(nèi)置了vue”文章已經(jīng)介紹完畢,想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領(lǐng)會,如果想了解更多相關(guān)內(nèi)容的文章,歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。
網(wǎng)頁題目:laravel是否內(nèi)置了vue
分享鏈接:http://m.rwnh.cn/article36/gdiepg.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供動態(tài)網(wǎng)站、搜索引擎優(yōu)化、全網(wǎng)營銷推廣、網(wǎng)頁設(shè)計公司、服務(wù)器托管、響應(yīng)式網(wǎng)站
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)