环球滚动: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自定义组件文件，代码如下。

<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,做为主界面，嵌套路由视图，代码如下。

<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，代码如下。

                
    <script src="{{ mix("js/manifest.js") }}"></script>    <script src="{{ mix("js/vendor.js") }}"></script>    <script src="{{ mix("js/hello.js") }}"></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");

保存后在命令行中本项目目录下执行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中文网其它相关文章！

关键词： 数据更新 程序开发 开发过程