扫码关注官方微信

扫码下载APP
返回顶部
首页 > 资讯 > 精选 >如何在Laravel中部署vue
  • 106

0
分享到

如何在Laravel中部署vue

2023-06-25 11:06:47 106人浏览 独家记忆
摘要

这篇文章主要介绍“如何在Laravel中部署Vue”，在日常操作中，相信很多人在如何在Laravel中部署vue问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”如何在Laravel中部署vue”的疑惑有所帮助！

这篇文章主要介绍“如何在Laravel中部署Vue”，在日常操作中，相信很多人在如何在Laravel中部署vue问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”如何在Laravel中部署vue”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！

Laravel+vue之环境部署

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

创建laravel

首先，你要有一个composer,然后，你便有了一个laravel。 运行命令composer create-project --prefer-dist laravel/laravel blog创建一个新的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>        <h2>Hello World!</h2>    </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>        <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');

保存后在命令行中本项目目录下执行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中部署vue”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注编程网网站，小编会继续努力为大家带来更多实用的文章！

--结束END--

本文标题: 如何在Laravel中部署vue

本文链接: https://lsjlt.com/news/304254.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • 如何在Laravel中部署vue
    这篇文章主要介绍“如何在Laravel中部署vue”，在日常操作中，相信很多人在如何在Laravel中部署vue问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”如何在Laravel中部署vue”的疑惑有所帮助！...
    99+
    2023-06-25
  • 如何在WDCP中部署PHP
    随着互联网技术的飞速发展，构建一个高性能的Web服务已成为每个Web开发者必不可少的一项技能。其中，PHP作为一种被广泛使用的编程语言，其在Web开发中的作用越来越受到人们的重视。而在使用PHP进行Web开发过程中，需要用到一个性能高、功能...
    99+
    2023-05-14
    wdcp php
  • Ubuntu如何部署vue项目
    Ubuntu部署vue项目的操作步骤：安装nginx。在vue项目的根目录下执行“npm run bulid:prod”打包vue项目。打包完成后会生成一个dist目录，将其上传到服务器中。修改nginx配置文件/etc/nginx/sit...
    99+
    2024-04-02
  • gitee如何部署vue项目
    今天小编给大家分享一下gitee如何部署vue项目的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解一下吧。首先，我们需要明确一个概念，...
    99+
    2023-07-05
  • 如何在Ubuntu LNMP中部署WordPress
    这篇文章给大家介绍如何在Ubuntu LNMP中部署WordPress，内容非常详细，感兴趣的小伙伴们可以参考借鉴，希望对大家能有所帮助。Ubuntu LNMP 部署 WordPress软件版本说明：Ubuntu: 16.04 LTS;Wo...
    99+
    2023-06-15
  • 如何用GitHub Actions自动部署Laravel项目
    本篇内容介绍了“如何用GitHub Actions自动部署Laravel项目”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！场景设置...#我...
    99+
    2023-07-04
  • 如何在docker中部署crownblog项目
    本篇文章为大家展示了如何在docker中部署crownblog项目，内容简明扼要并且容易理解，绝对能使你眼前一亮，通过这篇文章的详细介绍希望你能有所收获。前端项目打包找到.env.production 修改为自己的ip或者域名地址执行命令n...
    99+
    2023-06-15
  • 如何在Linux+Jexus中发布和部署
    今天就跟大家聊聊有关如何在Linux+Jexus中发布和部署，可能很多人都不太了解，为了让大家更加了解，小编给大家总结了以下内容，希望大家根据这篇文章可以有所收获。安装 Linux DotNet 环境安装 dotnet 环境参见官方网站 h...
    99+
    2023-06-22
  • jar包在linux中如何部署运行
    在Linux中部署和运行jar包的步骤如下：1. 确保你的Linux服务器已经安装了Java运行环境（JRE或JDK）。2. 将你的...
    99+
    2023-09-20
    linux
  • 如何在docker容器中部署应用
    本篇内容介绍了“如何在docker容器中部署应用”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！一个简单的Hello World应用。1 Ma...
    99+
    2023-06-02
  • 如何在 Linux 系统上部署 Laravel 项目并使用 ASP 函数？
    Laravel 是目前非常流行的 PHP 框架之一，它提供了许多方便的工具和功能来帮助开发人员更快速地构建高质量的 Web 应用程序。在本文中，我们将介绍如何在 Linux 系统上部署 Laravel 项目并使用 ASP 函数。 安装 La...
    99+
    2023-09-02
    函数 linux laravel
  • 实时Git部署：如何在ASP容器中实现快速部署？
    在软件开发的过程中，快速的部署和测试是非常重要的。Git是一个流行的版本控制工具，而实时Git部署可以使开发者更快速、更安全地部署应用程序。本文将介绍如何在ASP容器中实现实时Git部署，并演示一些示例代码。 首先，我们需要一个ASP容器...
    99+
    2023-08-28
    容器 实时 git
  • 如何实现Docker部署vue项目
    这篇文章主要介绍“如何实现Docker部署vue项目”，在日常操作中，相信很多人在如何实现Docker部署vue项目问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”如何实现Do...
    99+
    2024-04-02
  • 如何在Centos7.4下部署mysql5.7.24
    这篇文章主要介绍“如何在Centos7.4下部署mysql5.7.24”，在日常操作中，相信很多人在如何在Centos7.4下部署mysql5.7.24问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操...
    99+
    2024-04-02
  • MySQL如何部署在Linux上
    这篇文章给大家分享的是有关MySQL如何部署在Linux上的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。 配置SQL 1.用yum从windows下载...
    99+
    2024-04-02
  • react如何在linux上部署
    这篇文章主要介绍“react如何在linux上部署”，在日常操作中，相信很多人在react如何在linux上部署问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”react如何在linux上部署”的疑惑有所帮助！...
    99+
    2023-07-04
  • golang在本地如何部署
    这篇“golang在本地如何部署”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇“golang在本地如何部署”文章吧。安装Gol...
    99+
    2023-07-05
  • 如何在pytorch中部署半精度模型
    如何在pytorch中部署半精度模型？很多新手对此不是很清楚，为了帮助大家解决这个难题，下面小编将为大家详细讲解，有这方面需求的人可以来学习下，希望你能有所收获。具体方法在pytorch中，一般模型定义都继承torch.nn.Moudle，...
    99+
    2023-06-15
  • 如何在Azure中部署Kubernetes容器集群
    这篇文章主要讲解了“如何在Azure中部署Kubernetes容器集群”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“如何在Azure中部署Kubernetes容器集群”吧！在这个快速入门教程...
    99+
    2023-06-16
  • 如何在 Unix 系统中部署 ASP 容器？
    在 Unix 系统中，如果想要部署一个 ASP 容器，需要做哪些事情呢？这里，我们将为您详细介绍一下如何在 Unix 系统中部署 ASP 容器。 ASP（Active Server Pages）是一种由微软公司开发的服务器端脚本语言，用于在...
    99+
    2023-09-16
    容器 unix 数组
软考高级职称资格查询
热门wiki
近期文章
推荐阅读
热门问答
热门标签
编程网，编程工程师的家园，是目前国内优秀的开源技术社区之一，形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容，为IT开发者提供了一个发现、使用、并交流开源技术的平台。

  • 官方手机版

  • 微信公众号

  • 商务合作