Laravel Nuxt 项目教程
laravel-nuxtBuild a SPA with Laravel and Nuxt.项目地址:https://gitcode.com/gh_mirrors/lar/laravel-nuxt
项目介绍
Laravel Nuxt 是一个开源项目,旨在为开发者在 Laravel 和 Nuxt.js 框架上提供一个高性能的 API 开发模板。该项目包含了预制的授权方法、图像上传优化以及用户角色管理等功能。通过使用 Laravel 11 和 Nuxt 3,开发者可以快速搭建起一个现代化的 Web 应用。
项目快速启动
环境准备
确保你的开发环境已经安装了以下工具:
- Node.js
- Composer
- Docker(可选,用于 Laravel Sail)
克隆项目
git clone https://github.com/skyrpex/laravel-nuxt.git
cd laravel-nuxt
安装依赖
composer install
npm install
配置环境
复制 .env.example
文件并命名为 .env
,然后配置数据库和其他必要的环境变量。
cp .env.example .env
启动应用
使用 Laravel Sail 启动应用:
sail up
或者使用传统的 PHP 服务器:
php artisan serve
npm run dev
应用案例和最佳实践
用户认证
在 Nuxt 中使用 $fetch
进行用户认证:
<script lang="ts" setup>
const router = useRouter()
const auth = useAuthStore()
const form = ref()
const state = reactive({
email: "",
password: "",
remember: false
})
const [refresh, onSubmit, status] = useFetch("login", {
method: "POST",
body: state,
immediate: false,
watch: false
})
async function login() {
await onSubmit()
if (status.value === 'success') {
router.push('/dashboard')
}
}
</script>
图像上传
使用 Laravel 提供的文件上传功能,结合 Nuxt 进行前端处理:
// Laravel Controller
public function upload(Request $request)
{
$path = $request->file('image')->store('images', 'public');
return response()->json(['path' => $path]);
}
<template>
<input type="file" @change="uploadImage" />
</template>
<script lang="ts" setup>
async function uploadImage(event) {
const file = event.target.files[0]
const formData = new FormData()
formData.append('image', file)
const response = await fetch('/api/upload', {
method: 'POST',
body: formData
})
const data = await response.json()
console.log(data.path)
}
</script>
典型生态项目
Laravel Octane
Laravel Octane 通过使用高性能的应用服务器来提升应用的性能,适用于需要高并发的场景。
Nuxt UI 和 Tailwind CSS
Nuxt UI 和 Tailwind CSS 提供了丰富的 UI 组件和样式工具,帮助开发者快速构建美观且响应式的界面。
Laravel Telescope
Laravel Telescope 是一个调试助手,提供了对应用请求、异常、日志等的深入洞察,非常适合开发和调试阶段使用。
通过结合这些生态项目,开发者可以构建出更加强大和高效的 Laravel Nuxt 应用。
laravel-nuxtBuild a SPA with Laravel and Nuxt.项目地址:https://gitcode.com/gh_mirrors/lar/laravel-nuxt