站長資訊網
最全最豐富的資訊網站

laravel內置了vue嗎

laravel沒有內置vue;laravel是使用PHP語言編寫的網頁程序開發框架,而vue是一個用于創建用戶界面的開源JavaScript框架,可以在laravel中部署vue,但是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');});

贊(0)
分享到: 更多 (0)
網站地圖   滬ICP備18035694號-2    滬公網安備31011702889846號
国内精品久久久久久久涩爱| 精品成人免费自拍视频| 精品精品国产自在久久高清| 精品国产品香蕉在线观看| 久久er国产精品免费观看8| 国产精品成人在线| 91麻豆精品福利在线观看| 97视频精品视频人人一二区| 亚洲午夜精品第一区二区8050| 国产精品综合一区二区| 亚洲mv国产精品mv日本mv| 久久久久久一品道精品免费看 | 91久久国产精品| 久久91精品国产91久久| 久久99久国产麻精品66| 国产精品第一区揄拍| fulidown国产精品合集| 麻豆成人精品国产免费| 国产精品无码aⅴ嫩草| 日韩激情无码免费毛片| 国产成人无码精品一区在线观看 | 中日韩精品视频在线观看| 亚洲av日韩av欧v在线天堂| 亚洲日韩精品一区二区三区无码| 国产精品宾馆在线| 精品国产中文字幕| 亚洲AV无码精品色午夜果冻不卡| 亚洲色精品vr一区二区三区| 精品人妻潮喷久久久又裸又黄| 亚洲宅男精品一区在线观看| fulidown国产精品合集| 久久精品人人爽人人爽快| 亚洲国产精品综合久久一线 | 精品少妇人妻AV一区二区| 人妻少妇精品视中文字幕国语| 久久青青草原国产精品免费| 亚欧乱色国产精品免费视频| 一区二区精品在线观看| 亚洲AV无码AV日韩AV网站| 日韩好片一区二区在线看| 日韩人妻无码精品一专区|