README

维生素

Laravel 现在已经内置了对 Vite 的支持。维生素将不再接收任何更新。你可以通过 Laravel + Breeze 获得相同的功能。

一个高度意见化的打包脚手架解决方案，用于将 Vite、Tailwind 和 Inertia（以及其他一些东西）安装到 Laravel 应用中。

什么是维生素

维生素将安装所有必要的组件，以便在本地 Valet 安装上运行时，将 Vite、Tailwind、Vue 3、Inertia 和 Ziggy 与 Laravel 一起使用。这是一个非常主观的解决方案，但可以自定义以包含其他内容。

但是 Laravel 现在使用 Vite 而不是 Laravel Mix 呢？

从 Laravel 9.2 开始，Vite 用于打包资源，而不是 Laravel Mix。然而，我计划再维护维生素一段时间。至少现在是这样。所以如果你使用维生素，无需担心，它仍然以完全相同的方式工作。

安装

像 Laravel 中的所有东西一样，通过 Composer 安装维生素。

composer require thepublicgood/vitamin

安装完成后，运行维生素 Artisan 命令。

php ./artisan vitamin:init

维生素将引导你完成几个提示，然后安装整个脚手架，包括所需的 NPM 和 Composer 包。你可以根据需要稍后修改这些内容，但应该让这个过程完成。

如果你还没有，请链接 Valet 主机。

valet link mysite

运行 Vite 开发服务器

php ./artisan vitamin:serve

打开浏览器

http://mysite.test

如果你看到“欢迎”信息，那么你可以开始使用了。

安装了什么

以下 Composer 包被安装

以下 NPM 包被安装

使用方法

维生素将添加一些 NPM 脚本。以前的版本需要安装“Yarn”依赖管理器。较新版本将询问你是否更喜欢“npm”或“yarn”。

所有安装完成后，你可以使用 vitamin:serve Artisan 命令启动新的 Vite 开发服务器。还添加了一个 dev NPM 脚本，以便你可以使用你的 node 依赖管理器启动开发服务器。

yarn dev  
  
// or  
  
npm run dev  
  
// or  
  
php ./artisan vitamin:serve

Vite 将在你的本地机器上运行一个端口为 3000 的开发服务器。一旦它运行起来，你应该会看到类似以下的内容：

  vite v2.4.4 dev server running at:  
  
  > Local:    http://vitamin.test:3000/  
  > Network:  http://192.168.0.10:3000/  
  
  ready in 571ms.

你需要创建一个新的 Valet 链接，然后你应该能够访问你的新项目在 http://vitamin.test 或你的开发地址。

端口号

默认情况下，Vite 将在端口 3000 上运行。如果你需要，可以通过更改 vitamin.php 配置文件中的 port 设置来指定端口号。

return [  
    "port" => 3002,  
    //...  
]

或者通过将端口号传递给vitamin:serve命令

php ./artisan vitamin:serve --port=3010

为生产环境构建

要为您的项目进行生产环境构建

yarn prod  
  
// or  
  
npm run prod

就这么简单。根据您项目的大小，构建应该比Webpack快得多。一旦完成，将有一个新的public/build目录。您可能希望将其添加到您的.gitignore文件中。在您的存储库中包含编译后的资源是不明智的。

视图合成器

Vitamin的核心是一个简单的Laravel视图合成器，确保正确的资源被插入到页面中。视图合成器包含在包中，但您可以根据需要对其进行扩展。例如，如果您正在使用TypeScript，您可能需要将app.js文件更改为app.ts文件，并且需要更新视图合成器以指向正确的文件名。要这样做，在您的项目中创建一个新的AppComposer类，并扩展TPG\Vitamin\Composers\AppComposer类。然后，您可以覆盖$jsPath属性

namespace App\Composers;  
  
use TPG\Vitamin\Composers\AppComposer as VitaminAppComposer;  
  
class AppComposer extends VitaminAppComposer  
{  
    protected string $jsPath = 'resources/js/app.ts';  
}

您需要确保您的应用程序绑定到您的新合成器而不是默认的合成器。您可以通过找到的vitamin.php配置文件来完成此操作，该文件位于您的config目录中。只需将composer配置选项更改为指向您的新的类

[  
    'composer' => App\Composers\AppComposer::class,  
]

这就完成了。现在，您的应用程序将使用您的新视图合成器而不是默认的Vitamin合成器。如果您需要在视图合成器中覆盖compose方法，请记住调用parent::compose()

public function compose(View $view): void  
{  
    // Anything custom you need to do goes here...  
      
    parent::compose($view);  
}

如果您不熟悉Laravel视图合成器，请参阅文档这里。

Valet

在开发期间，所有资源都从运行在端口3000的开发服务器中提供。Vitamin包含一个自定义的Valet驱动程序（您的项目根目录中应该有一个LocalValetDriver.php文件），这将确保从node_modules提供的资源被正确提供。我发现这适用于一些边缘情况。自定义驱动程序扩展了默认的LaravelValetDriver，因此您不应该遇到任何问题。但是，如果您发现您在使用自定义驱动程序时遇到问题，只需删除该文件，Valet将继续使用其默认驱动程序。

Inertia

Inertia是我现在的首选，因此Vitamin默认会设置它。在初始化期间，您会被问及Vue组件存储的位置。如果您愿意，可以在app.js中自定义此位置。Vite将从那里加载您的Vue页面。Inertia文档使用resources/js/Pages，因此Vitamin将提出此建议。然而，技术上，您可以将它们放在任何位置。Vitamin强加的唯一要求是该位置必须是JS路径的子目录。

Ziggy

Ziggy是Laravel的JavaScript路由助手。它允许您在JavaScript前端中使用Laravel定义的路由。Vitamin包含一个提供route函数的Router脚本。您可以将此导入到任何Vue文件中以访问您的Laravel路由

import {route} from '@/Scripts/Routing/Router.js'  
  
route('home');

在resources/js/Scripts/Routing/Ziggy.js文件中，Vitamin设置了Ziggy路由。每次更改Laravel路由时，此文件都需要重新生成。Vitamin通过创建一个简单的Vite插件来自动完成此操作，该插件将在Laravel路由文件更改时运行yarn routes脚本。但是，如果您需要重新构建路由，只需手动运行yarn routes即可。如果您更改此文件名称或想将其放在其他位置，请记住也要更新Router.js文件中的引用。

在Vitamin的早期版本中，使用了Ziggy Vue插件，但我发现新方法更灵活，并且在使用Vue组合API时表现更好。

TLS证书

您也可以使用TLS来实现所有这些功能，这样您在开发过程中就可以使用https地址。首先，您需要让Valet为您的站点提供安全保护，这已经为这个问题提供了一个简单的解决方案。如果您正在使用mysite.test提供您的站点，则可以让Valet生成一个新的证书

valet secure mysite

它可能会要求您输入密码。

您还需要让Vite做同样的事情。最简单的方法是使用mkcert Vite插件

yarn add vite-plugin-mkcert -D

更新vite.config.js文件，并将server.https设置为true，然后将mkcert()添加到插件数组中

export default({command}) => ({  
    //...  
  
    server: {  
        https: true,  
    },  
  
    plugins: [  
        vue(),  
        mkcert(),  
  
        //..  
    ],  
});

最后，更新vitamin.php配置文件，并将https选项设置为true

{  
     "https": true  
}

第一次运行yarn dev时，您可能会被要求输入密码，这样mkcert插件就可以生成一个新的证书。

thepublicgood / 维生素

维护者

详情