后端开发教程 - Java、Spring Boot 实战 - msg200.com
使用 Laravel 和 Nuxt 创建 SPA
入门
从 SPA 调用 API
部署
最后的想法
在本教程中，我们将使用Laravel作为 API，并使用 Nuxt作为单页应用程序。它们可以协同工作，但一开始并不容易。如果你已经尝试过，让 HMR 无缝运行起来会很麻烦！因此，我创建了laravel-nuxt和laravel-nuxt-js。
使用这些软件包的原因还有很多，例如使用Laravel Passport和 时CreateFreshApiToken。中间件将在使用 http 动词的路由api_token上创建 cookie ，如果您不是在 Laravel 内部提供 SPA，那么就会出现问题。webget
入门
安装 Laravel
让我们从全新的 Laravel 安装开始：
composer create-project laravel/laravel spa
spa使用终端进入该目录。
安装 laravel-nuxt（适用于 PHP）
# cd spa
composer require pallares/laravel-nuxt
此软件包将被自动发现。如果您使用的是旧版本的 Laravel，只需在文件中添加服务提供商config/app.php：
<?php
return [
// ...
'providers' => [
// ...
Pallares\LaravelNuxt\LaravelNuxtServiceProvider::class,
],
];
添加一个将在文件中渲染 SPA 页面的回退路由routes/web.php。请务必删除框架自带的默认路由：
<?php
// Route::get('/', function () {
// return view('welcome');
// });
Route::get(
'{uri}',
'\\'.Pallares\LaravelNuxt\Controllers\NuxtController::class
)->where('uri', '.*');
现在，你的后端已经准备好提供 Nuxt 为你生成的编译资源了。所有之前返回 404 的路由现在都会为我们的 SPA 页面提供服务。
安装 laravel-nuxt（用于 JS）
现在该安装 JS 包了。将package.json文件替换为以下内容：
{
"private": true,
"scripts": {
"start": "laravel-nuxt dev",
"build": "laravel-nuxt build"
},
"dependencies": {
"laravel-nuxt": "^1.0.0"
}
}
安装依赖项：
npm install
该laravel-nuxt软件包将为您安装 Nuxt，以及Vue、vue-router、@nuxtjs/axios等。让我们创建nuxt.config.js文件：
const laravelNuxt = require("laravel-nuxt");
module.exports = laravelNuxt({
// Options such as mode, srcDir and generate.dir are already handled for you.
modules: [],
plugins: [],
});
从现在开始，Nuxt 将在目录中查找源文件resources/nuxt。
在以下位置创建一个 hello world 路线resources/nuxt/pages/index.vue：
<template>
<h1>Hello {{ name }}!</h1>
</template>
<script>
export default {
data: () => {
return { name: 'world' };
},
};
</script>
最后运行：
npm start
访问http://localhost:8000。你应该看到如下内容：
就这样！Laravel Artisan 服务器和 Nuxt 开发服务器已经启动并透明地协同工作。现在尝试编辑你的主页，实时刷新的效果一定让你非常享受。
在底层，Nuxt 的开发服务器代理了对 Laravel 服务器的所有调用，包括 SPA 渲染。由于@nuxtjs/axios模块已包含在内（并且也经过代理），因此您可以正常进行 API 调用。
从 SPA 调用 API
SPA 肯定需要调用我们的 API，所以让我们添加一个路由来routes/api.php检索用户信息：
<?php
Route::get('me', function () {
// Let's return fake information.
return [
'name' => 'John Doe',
];
});
现在，编辑resources/nuxt/pages/index.vue：
<template>
<h1>Hello {{ user.name }}!</h1>
</template>
<script>
export default {
// https://github.com/nuxt-community/axios-module
async asyncData({ app }) {
const user = await app.$axios.$get('api/me');
return { user };
},
};
</script>
瞧！你的页面现在看起来应该像这样！
为了简化教程，我们这里不使用任何身份验证。集成 Passport 应该很容易。
部署
如果您想部署应用程序，只需运行npm run build。编译后的资源将被放置在public/_nuxt目录中。
您可以使用众所周知的 artisan 命令预览最终的应用程序php artisan serve。
您可能想要将
.nuxt和public/_nuxt目录添加到您的.gitignore。
最后的想法
这是我的第一篇教程。希望所有内容清晰简洁！如有任何问题，请随时在这里提问，或在 laravel-nuxt 仓库中创建问题。谢谢！
文章来源：https://dev.to/skyrpex/create-a-spa-with-laravel-and-nuxt--54k