FusionPHP 项目使用与启动教程

FusionPHP 项目使用与启动教程

fusion Unite your modern frontend with your Laravel backend. 项目地址: https://gitcode.com/gh_mirrors/fusion27/fusion

1. 项目介绍

FusionPHP 是一个开源项目，旨在帮助开发者将 Laravel 后端与 JavaScript 前端结合起来。目前，该项目支持 Vue.js，未来计划支持 React 和 Svelte。FusionPHP 使用 Vite 来提取 JavaScript 文件中的 PHP 代码块，并将其写入磁盘。它还允许开发者同步前端和后端的状态，但并不包括自动同步功能。FusionPHP 符合 Laravel 的请求/响应生命周期，路由、身份验证、中间件等。

2. 项目快速启动

环境准备

确保你的环境已经安装了 PHP、Node.js 和 Composer。

安装 FusionPHP

在你的 Laravel 项目中，首先通过 Composer 安装 FusionPHP：

composer require fusionphp/fusion

安装完成后，运行以下命令进行项目配置：

php artisan fusion:install

这个命令会执行以下操作：

• 发布 config/fusion.php 配置文件。
• 确保正确的存储目录存在。
• 更新 package.json，添加 Vue 包。
• 修改 postinstall 脚本以调用 fusion:install。
• 在 resources/js/app.js 中添加 Vue 插件。
• 在 vite.config.js 中添加 Vite 插件。
• 在 composer.json 中添加 post-update-cmd。
• 迁移 Fusion 的内部 SQLite 数据库。

运行项目

现在，你可以通过以下命令启动 Vite：

npm run dev

FusionPHP 将作为 Vite 工具链的一部分运行。

3. 应用案例和最佳实践

文件结构

FusionPHP 使用 .vue 文件，并在其中嵌入 PHP 代码块。例如，创建一个简单的页面：

<template>
  <div>Hello {{ name }}!</div>
</template>

<php>
$name = 'World';
</php>

在上面的例子中，PHP 代码块定义了一个变量 $name，它将在 Vue 模板中被使用。

路由

FusionPHP 支持两种路由方式：基于文件的自动路由和单独组件的路由。

基于文件的自动路由

在 web.php 文件中调用 Fusion::pages() 来启动自动路由：

use Fusion\Fusion;

Fusion::pages();

这将自动路由 resources/js/Pages 目录下的所有 .vue 文件。

单独组件的路由

你也可以为单独的组件设置路由，例如：

use Fusion\Fusion;

Fusion::route('example', 'ExampleComponent');

这里，example 是路由名称，ExampleComponent 是组件名称。

4. 典型生态项目

FusionPHP 可以与 Laravel 的其他组件和库配合使用，例如 Inertia.js。你可以查看官方文档或者社区的最佳实践来了解如何更好地集成和使用这些生态项目。

以上就是 FusionPHP 的基本介绍和快速启动指南。希望这能帮助你开始你的项目开发！

fusion Unite your modern frontend with your Laravel backend. 项目地址: https://gitcode.com/gh_mirrors/fusion27/fusion