README

Laravel VILTify

Laravel VILTify是一个高度定制的Laravel启动工具包。其目的是无缝集成Vue、Inertia.js、Laravel、TailwindCSS和Vuetify，这样你就可以节省时间学习如何操作，专注于编写你的应用程序，无需配置设置。

需求

操作系统：此包应在MacOS和Linux上运行。如果您使用Windows，您将需要WSL。
Laravel 8, 9
Vue CLI：在内部，此包将调用Vue CLI工具。在继续之前，请确保您已安装了Vue CLI V5。如果没有，安装相当简单。安装说明。

快速入门

注意：此包旨在仅在全新Laravel安装上使用。

# Create a new Laravel project
composer create-project laravel/laravel my-app

# Enter the project folder
cd my-app

# Install Laravel VILTify
composer require dalpizzol/laravel-viltify

# Create your base tables
php artisan migrate

# Run the installer
php artisan viltify:install

# Remove the package so you don't accidentally run it again in the future
composer remove dalpizzol/laravel-viltify

# Enter the resources folder
cd resources

# Lift the assets devserver
npm run serve

# Lift the PHP server in another terminal
# (if you're not already running one)
php artisan serve

注意:

请注意，您正在运行两个服务器，就像您使用Laravel Mix一样。您的PHP应用程序在端口80上运行，而devserver在端口8080上运行。因此，在浏览器中，您将导航到端口80上的PHP应用程序，例如：https://。

故障排除

在某些情况下，如果您使用Node.js 17.x.x或更高版本，则在运行resources/package.json中的脚本（如npm run serve或npm run build）时可能会遇到ERR_OSSL_EVP_UNSUPPORTED错误。

这与Node.js 17引入的变化有关，您可以在此处了解更多信息这里、这里和这里。

您不需要降级Node.js。相反，只需在resources/package.json脚本之前添加NODE_OPTIONS=--openssl-legacy-provider。

// resources/package.json

{
  scripts: {
    "serve": "NODE_OPTIONS=--openssl-legacy-provider vue-cli-service serve",
    "build": "NODE_OPTIONS=--openssl-legacy-provider vue-cli-service build"
  }
}

为什么我会选择这个而不是Laravel Breeze或Laravel Jetstream？

实际上，此包高度基于Laravel Breeze。大量代码直接从该工具中提取。但这里也有一些优势

使用Vue CLI而不是Laravel Mix

此包实际上将您的 resources 文件夹转换为由 Vue CLI 生成的 Vue 应用程序。这意味着在 resources 中，您可以执行诸如 vue add some-vue-cli-plugin 之类的操作，这在使用 Laravel Mix 时是无法实现的。Vue CLI 比 Laravel Mix 更稳定，并且更专注于与 Vue 一起使用，因此您可能会节省一些时间，避免与 Laravel Mix 相关的常见问题。

这还允许您在 resources 中使用 Vue CLI 的 GUI，如果您喜欢的话...

掌握Vuetify的全部功能

虽然官方的 Laravel 启动包提供了一打 Vue 组件，但它们相当简单。《Laravel VILTify》附带已经安装和配置好的 Vuetify UI 组件库，因此您可以利用基于 Google 的 Material Design 的 70 多个高度可定制的、响应式且美观的组件。

Vuetify和TailwindCSS类之间没有冲突

《Laravel VILTify》附带已经配置好的 Vuetify 和 TailwindCSS，因此您可以在不担心类冲突的情况下使用它们。您所需要做的只是将 tailwind 类名以 tw- 为前缀。

Inertia.js的便利性

全局 v-link 组件

《Laravel VILTify》提供了一个全局注册的 v-link 组件，它是一个由 Vuetify 的 v-btn 组件包裹的 Inertia.js 的 Link 组件。这样，您可以在任何地方使用 Inertia.js 链接，而无需在每个组件中记住包括本地 Link 组件，并且它们可以使用 v-btn 组件的所有样式。Inertia 的 Link 组件也全局注册。

<v-link :href="someUrl"
  color="success"
  rounded
  outlined
  x-large
>
  This is an Inertia.js link rendered as a Vuetify Button
</v-link>

服务器驱动的toast通知

它还附带一个由服务器驱动的吐司通知系统，专为与 Inertia.js 良好协作而定制。这意味着您可以这样做

// Success message
return redirect()
  ->route('dashboard')
  ->toast('Laravel VILTify is awesome');

// Error message
return redirect()
  ->route('dashboard')
  ->toast('You didn\'t give Laravel VILTify a star. =(', 'error');

它提供的另一个酷炫功能是 验证吐司。当您在表单中有一些“不可见数据”可能无效时很有用。例如，reCaptcha V3 令牌。由于没有可见的表单元素用于令牌，如果令牌验证失败，您可能希望吐司验证错误。

Toast::validation('recaptcha_token');

request()->validate([
  'recaptcha_token',
  // ...
]);

// It also accepts an array:
// Toast::validation(['recaptcha_token', 'another_field'])

确保在运行验证之前调用 Toast::validation。

考虑到生产构建的合理默认值

开箱即用的代码分割

由于我们处理的是 SPAs，《Laravel VILTify》确保代码分割发生。默认情况下，任何路由所需的所有文件都是按需加载的。

使用Material Design Icons JS SVG而不是WebFont

默认情况下，Vuetify 配置为使用 @mdi/js 而不是常规 WebFont，因此它强制您只加载您真正需要的图标。了解更多信息。

为不同的端点生成单独的构建

如果您需要为完全不同的端点创建单独的构建，例如，管理区域，请按照以下步骤操作

1. 复制 resources/src/templates/app.blade.php 并将其重命名为 resources/src/templates/app-admin.blade.php。这将成为您的 Inertia 的 rootView。

2. 在 resources/vue.config.js 中创建 pages 属性的新条目。

  pages: {
    ...page('main', 'app'),
    ...page('admin', 'app-admin')
  },

  // The following disables prefetch links generation for each endpoint
  chainWebpack: config => {
    config.plugins.delete('prefetch-main'),
    config.plugins.delete('prefetch-admin')
  }

3. 复制 resources/src/main.js 并将其重命名为 resources/src/admin.js。

4. 然后，您需要指导 Inertia 在渲染管理页面时使用 app-admin.blade.php 视图。

return Inertia::setRootView('app-admin')
  ->render('admin/Dashboard');

隔离的客户端环境设置

当使用 Laravel Mix 时，客户端环境设置被放入 MIX_ 前缀的变量中，这些变量位于 .env 文件内。在这里，由于我们的 resources 文件夹实际上是一个 Vue CLI 生成的应用，你可以利用 Vue CLI 提供的环境变量处理模式。Laravel VILTify 默认包含了用于开发服务器的 resources/.env.local 和一个 resources/.env.production 示例文件，因此你可以将每个客户端设置与 Laravel 设置分离处理。

缺点

由于本意是使用 Vuetify，所以我们仍然使用 Vue 2 和 Webpack，而不是 Vue 3 和 Vite，因为 Vuetify 对 Vue 3 的支持尚未发布。

许可证

本软件免费提供，且不受任何限制，遵循 MIT 许可证。

sdon2 / laravel-viltify

维护者

详细信息