详解怎么在Laravel中部署vue-Laravel-PHP中文网

首页

php框架

Laravel

详解怎么在Laravel中部署vue

藏色散人

Oct 28, 2021 pm 03:48 PM

laravelvue

Laravel+vue之环境部署

本教程介绍在Laravel中部署vue，在Laravel包含了一些基本脚手架，以便使用Vue库更容易开始编写现代JavaScript 。Vue为使用组件构建强大的JavaScript应用程序提供了富有表现力的API。我们可以使用Laravel Mix轻松地将JavaScript组件编译成一个可以浏览器的JavaScript文件。

相关推荐：最新的五个Laravel视频教程、最新的5个vue.js视频教程精选

创建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(&#39;/hello&#39;,&#39;/hello&#39;);

修改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');});

最后

有时候运行npm时会提示Write EIO错误，可能是因为编码的问题造成，这种时候可用管理员身份运行命令行文件，或者运行chcp 850设置活动代码页编号，介绍在laravel中部署vue的教程基本结束，如果您有兴趣了解更多关于编写Vue组件的信息,你可以阅读Vue文档,就酱。

以上是详解怎么在Laravel中部署vue的详细内容。更多信息请关注PHP中文网其他相关文章！

声明

本文转载于：juejin。如有侵权，请联系admin@php.cn删除

Laravel的后端功能：数据库，逻辑等等Apr 14, 2025 am 12:04 AM

Laravel在后端开发中表现强大，通过EloquentORM简化数据库操作，控制器和服务类处理业务逻辑，并提供队列、事件等功能。1)EloquentORM通过模型映射数据库表，简化查询。2)业务逻辑在控制器和服务类中处理，提高模块化和可维护性。3)其他功能如队列系统帮助处理复杂需求。

Laravel的多功能性：从简单站点到复杂系统Apr 13, 2025 am 12:13 AM

选择Laravel开发项目是因为其灵活性和强大功能适应不同规模和复杂度的需求。Laravel提供路由系统、EloquentORM、Artisan命令行等功能，支持从简单博客到复杂企业级系统的开发。

Laravel（PHP）与Python：开发环境和生态系统Apr 12, 2025 am 12:10 AM

Laravel和Python在开发环境和生态系统上的对比如下：1.Laravel的开发环境简单，仅需PHP和Composer，提供了丰富的扩展包如LaravelForge，但扩展包维护可能不及时。2.Python的开发环境也简单，仅需Python和pip，生态系统庞大，涵盖多个领域，但版本和依赖管理可能复杂。

Laravel和后端：为Web应用程序提供动力逻辑Apr 11, 2025 am 11:29 AM

Laravel是如何在后端逻辑中发挥作用的？它通过路由系统、EloquentORM、认证与授权、事件与监听器以及性能优化来简化和增强后端开发。1.路由系统允许定义URL结构和请求处理逻辑。2.EloquentORM简化数据库交互。3.认证与授权系统便于用户管理。4.事件与监听器实现松耦合代码结构。5.性能优化通过缓存和队列提高应用效率。

为什么Laravel如此受欢迎？Apr 02, 2025 pm 02:16 PM

Laravel受欢迎的原因包括其简化开发过程、提供愉快的开发环境和丰富的功能。1)它吸收了RubyonRails的设计理念，结合PHP的灵活性。2)提供了如EloquentORM、Blade模板引擎等工具，提高开发效率。3)其MVC架构和依赖注入机制使代码更加模块化和可测试。4)提供了强大的调试工具和性能优化方法，如缓存系统和最佳实践。

django或laravel哪个更好？Mar 28, 2025 am 10:41 AM

Django和Laravel都是全栈框架，Django适合Python开发者和复杂业务逻辑，Laravel适合PHP开发者和优雅语法。1.Django基于Python，遵循“电池齐全”哲学，适合快速开发和高并发。2.Laravel基于PHP，强调开发者体验，适合小型到中型项目。

哪个是更好的PHP或Laravel？Mar 27, 2025 pm 05:31 PM

PHP和Laravel不是直接可比的，因为Laravel是基于PHP的框架。1.PHP适合小型项目或快速原型开发，因其简单直接。2.Laravel适合大型项目或高效开发，因其提供丰富功能和工具，但学习曲线较陡，性能可能不如纯PHP。

Laravel是前端还是后端？Mar 27, 2025 pm 05:31 PM

laravelisabackendframeworkbuiltonphp，设计ForweBapplicationDevelopment.itfocusessonserver-sideLogic，databasemagemention和Applicationstructure和CanBeintegratedWithFrontendTechnologiesLikeLikeVue.jsorreActeReacterVue.jsorreActforforfull-stackDevefloct。

See all articles