Laravel Nuxt 项目教程

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