使用 Laravel 和 Vue 创建单页应用程序

pxr007

已于 2023-08-26 13:20:23 修改

阅读量302

点赞数

文章标签： laravel vue.js php

于 2023-08-26 13:19:12 首次发布

本文链接：https://blog.csdn.net/weixin_47967031/article/details/130087561

版权

本文介绍了如何结合 Laravel 9 和 Vue 3 创建单页应用程序（SPA）。讨论了 Laravel 与 Vue 配合的优势，如简化项目设置和提升用户体验。内容涵盖SPA的概念、项目设置过程、Vue 路由配置，以及使用 Laravel Sanctum 进行身份验证。示例应用是一个允许用户注册和管理待办事项的SPA，展示了如何处理登录、注册、添加和管理任务的页面。

摘要由CSDN通过智能技术生成

凭借其干净的语法和表现力，以及许多其他品质，Laravel是开发人员使用的最受欢迎的PHP框架之一。

创建单页应用程序 Laravel Vue

在 Laravel UI 推出之前，它的主要功能之一是默认支持 Vue.js从 Laravel v5.3 到 v6。Vue 是一个现代的 JavaScript 前端框架，用于创建用户界面。

在本文中，我们将演示如何使用Laravel和Vue构建单页应用程序。

为什么拉拉维尔和 Vue 在一起很好？

以下是将Laravel与Vue一起使用为您的项目创建全栈工作流程的一些主要优势：

源代码被合并到一个项目中，而不是为后端和前端提供单独的项目
设置和配置简单
单个部署可以同时处理两个框架

什么是水疗？（单页申请）

单页应用程序（简称 SPA）将新数据从 Web 服务器动态加载到网页，而无需刷新整个页面。

使用SPA的流行网站的例子包括 gmail.com 和 youtube.com - 换句话说，SPA在很大程度上无处不在。您可能每win8开机登录界面颜色怎么换？五个步骤轻松更换图文教程天使用的大多数管理仪表板都是使用 SPA 创建的。

水疗的好处：

用户体验更灵活
在浏览器中缓存数据
快速加载时间

SPA的缺点：

可能会损害 SEO（搜索引擎优化）
潜在的安全问题
消耗大量浏览器资源

项目设置

这篇文章将演示如何开发一个允许用户注册帐户和添加任务的待办事项应用程序。

在本教程中，使用的是 Laravel 9，如何自己在家冲洗胶卷？在家冲洗胶片需要多少钱？它需要 PHP 8.1 和 Vue 3;我们还需要安装 PHP 和 NGINX。

让我们从以下命令开始：

composer create-project --prefer-dist laravel/laravel laravel-vue-demo

接下来，我们将安装 JavaScript 依赖项。

npm install

我们必须先安装一些软件包，然后才能将 Vue 添加到我们的项目中。

此外，必须安装 plugin-vue，如何自己在家冲洗胶卷？在家冲洗胶片需要多少钱？因为 Laravel 9 附带了 Vite，而不是 webpack-mix，后者是 JavaScript 的 Laravel 捆绑器。现在让我们这样做：

npm install vue@next vue-loader@next @vitejs/plugin-vue

打开调用的文件并添加到配置中：vite.config.js``vue()

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import vue from '@vitejs/plugin-vue'

export default defineConfig({
    plugins: [
        vue(),
        laravel([
            'resources/css/app.css',
            'resources/js/app.js',
        ]),
    ],
});

编辑 Vue 3 应用引导程序的文件和代码片段：app.js

require('./bootstrap');

import {createApp} from 'vue'

import App from './App.vue'

createApp(App).mount("#app")

创建一个名为的文件并添加以下内容：App.vue

<template>
  <h1> Hello, Vuejs with Laravel </h1>
</template>
<script>
export default {
  setup() {

   }
}
</script>

最后，打开位于文件夹中的文件并添加以下内容：welcome.blade.php``resources/views

<!DOCTYPE html>
<html>
<head>
 ....
        @vite('resources/css/app.css')
</head>
<body>
  <div id="app"></div>
  @vite('resources/js/app.js')
</body>
</html>

要预览我们的应用程序，winamp皮肤怎么用？winamp皮肤安装图文教程我们需要在两个不同的终端/命令行上启动我们的 Vue 应用程序和 Laravel 服务器：