laravel内置了vue吗-Laravel-PHP中文网

首页

php框架

Laravel

laravel内置了vue吗

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Sep 01, 2022 pm 05:09 PM

laravel

laravel没有内置vue；laravel是使用PHP语言编写的网页程序开发框架，而vue是一个用于创建用户界面的开源JavaScript框架，可以在laravel中部署vue，但是laravel中并不存在内置vue。

laravel内置了vue吗

本文操作环境：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 &#39;vue&#39;
import VueRouter from &#39;vue-router&#39;
Vue.use(VueRouter)
export default new VueRouter({
    saveScrollPosition: true,
    routes: [
        {
            name: "hello",
            path: &#39;/&#39;,
            component: resolve =>void(require([&#39;../components/HelloComponent.vue&#39;], 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(&#39;./bootstrap&#39;);
window.Vue = require(&#39;vue&#39;);
import Vue from &#39;vue&#39;
import App from &#39;./hello.vue&#39;
import router from &#39;./router/hello.js&#39;
const app = new Vue({
    el: &#39;#app&#39;,
    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(&#39;js/manifest.js&#39;) }}"></script>
    <script src="{{ mix(&#39;js/vendor.js&#39;) }}"></script>
    <script src="{{ mix(&#39;js/hello.js&#39;) }}"></script>
</body>
</html>

在/resources/routes/web.php中新增路由，代码如下。

Route::view('/hello','/hello');

修改webpack.mix.js，代码如下。

mix.js(&#39;resources/assets/js/app.js&#39;, &#39;public/js&#39;)
   .js(&#39;resources/assets/js/hello.js&#39;, &#39;public/js&#39;)
   .extract([&#39;vue&#39;, "vue-router", "axios"])
   .sass(&#39;resources/assets/sass/app.scss&#39;, &#39;public/css&#39;);

保存后在命令行中本项目目录下执行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');});

【相关推荐：laravel视频教程】

以上是laravel内置了vue吗的详细内容。更多信息请关注PHP中文网其他相关文章！

声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

Laravel（PHP）与Python：权衡优点和缺点Apr 17, 2025 am 12:18 AM

Laravel适合快速构建Web应用，而Python适用于更广泛的应用场景。 1.Laravel提供EloquentORM、Blade模板引擎和Artisan工具，简化Web开发。 2.Python以动态类型、丰富的标准库和第三方生态系统着称，适用于Web开发、数据科学等领域。

Laravel vs. Python：比较框架和图书馆Apr 17, 2025 am 12:16 AM

Laravel和Python各有优势：Laravel适合快速构建功能丰富的Web应用，Python在数据科学和通用编程领域表现出色。1.Laravel提供EloquentORM和Blade模板引擎，适合构建现代Web应用。2.Python拥有丰富的标准库和第三方库，Django和Flask框架满足不同开发需求。

Laravel的目的：构建强大而优雅的Web应用程序Apr 17, 2025 am 12:13 AM

Laravel值得选择，因为它能使代码结构清晰，开发过程更具艺术性。1)Laravel基于PHP，遵循MVC架构，简化Web开发。2)其核心功能如EloquentORM、Artisan工具和Blade模板增强了开发的优雅与健壮性。3)通过路由、控制器、模型和视图，开发者能高效构建应用。4)队列和事件监听等高级功能进一步提升应用性能。

Laravel：主要解释了后端框架Apr 17, 2025 am 12:02 AM

Laravel不仅是后端框架，还是完整的Web开发解决方案。它提供了强大的后端功能，如路由、数据库操作、用户认证等，并支持前端开发，提升了整个Web应用的开发效率。

Laravel（PHP）与Python：了解关键差异Apr 17, 2025 am 12:01 AM

Laravel适合Web开发，Python适用于数据科学和快速原型开发。 1.Laravel基于PHP，提供优雅的语法和丰富功能，如EloquentORM。 2.Python以简洁着称，广泛应用于Web开发和数据科学，拥有丰富的库生态系统。

行动中的Laravel：现实世界的应用和示例Apr 16, 2025 am 12:02 AM

laravelcanbeeffectefection ininreal-worldapplications forbuildingscalablewebsolutions.1）ITSImplifieCrudoperationsInrestfulaPisusingEloquentorm.2）laravel'secosystem，包括Toolslikenova，包括Toolslikenova，增强功能

Laravel的主要功能：后端开发Apr 15, 2025 am 12:14 AM

Laravel在后端开发中的核心功能包括路由系统、EloquentORM、迁移功能、缓存系统和队列系统。1.路由系统简化了URL映射，提高了代码组织和维护性。2.EloquentORM提供了面向对象的数据操作，提升了开发效率。3.迁移功能通过版本控制管理数据库结构，确保一致性。4.缓存系统减少数据库查询，提升响应速度。5.队列系统有效处理大规模数据，避免阻塞用户请求，提升整体性能。