laravel是否內(nèi)置了vue

本文小編為大家詳細(xì)介紹“l(fā)aravel是否內(nèi)置了vue”，內(nèi)容詳細(xì)，步驟清晰，細(xì)節(jié)處理妥當(dāng)，希望這篇“l(fā)aravel是否內(nèi)置了vue”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來(lái)學(xué)習(xí)新知識(shí)吧。

讓客戶(hù)滿(mǎn)意是我們工作的目標(biāo)，不斷超越客戶(hù)的期望值來(lái)自于我們對(duì)這個(gè)行業(yè)的熱愛(ài)。我們立志把好的技術(shù)通過(guò)有效、簡(jiǎn)單的方式提供給客戶(hù)，將通過(guò)不懈努力成為客戶(hù)在信息化領(lǐng)域值得信任、有價(jià)值的長(zhǎng)期合作伙伴，公司提供的服務(wù)項(xiàng)目有：域名與空間、網(wǎng)頁(yè)空間、營(yíng)銷(xiāo)軟件、網(wǎng)站建設(shè)、察隅網(wǎng)站維護(hù)、網(wǎng)站推廣。

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

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

laravel內(nèi)置了vue嗎

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

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

Laravel

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

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

vue

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

Vue.js是一款流行的JavaScript前端框架，旨在更好地組織與簡(jiǎn)化Web開(kāi)發(fā)。Vue所關(guān)注的核心是MVC模式中的視圖層，同時(shí)，它也能方便地獲取數(shù)據(jù)更新，并通過(guò)組件內(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請(qǐng)到官網(wǎng)學(xué)習(xí)）。

Hello world!

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

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

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

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

npm install vue-router --save-dev

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

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

在/resources/assets/js下新建文件夾router,并在里面新建hello.js,并通過(guò)嵌套路由配置將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>
        <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');

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

可以在命令行中本項(xiàng)目目錄下輸入php artisan serve,訪(fǎng)問(wèn)http://127.0.0.1:8000/hello即可看到效果

laravel5.5起新增了Route::view和Route::redirect方法，5.4及以下的路由可以寫(xiě)成這樣Route::get('/hello', function () {return view('hello');})。

讀到這里，這篇“l(fā)aravel是否內(nèi)置了vue”文章已經(jīng)介紹完畢，想要掌握這篇文章的知識(shí)點(diǎn)還需要大家自己動(dòng)手實(shí)踐使用過(guò)才能領(lǐng)會(huì)，如果想了解更多相關(guān)內(nèi)容的文章，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

網(wǎng)頁(yè)題目：laravel是否內(nèi)置了vue
分享鏈接：http://muchs.cn/article36/gdiepg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供動(dòng)態(tài)網(wǎng)站、搜索引擎優(yōu)化、全網(wǎng)營(yíng)銷(xiāo)推廣、網(wǎng)頁(yè)設(shè)計(jì)公司、服務(wù)器托管、響應(yīng)式網(wǎng)站

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話(huà)：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容