README

#TAL FORM TABLE

#ALTERANDO O MIX PARA INCLUIR o MIX DO PACOTE

mix
.js('resources/js/app.js', 'public/js')
.js('vendor/callcocam/packages-tall/tall-theme/resources/js/app.js', 'public/js/assets')
    .postCss('resources/css/app.css', 'public/css', [
        require('postcss-import'),
        require('tailwindcss'),
    ])
    .postCss('vendor/callcocam/packages-tall/tall-theme/resources/css/app.css', 'public/css/assets', [
        require('postcss-import'),
        require('tailwindcss'),
    ])
     .copy('vendor/callcocam/packages-tall/tall-theme/resources/js/scroll.js', 'public/js/asset/scroll.js')
    .react();

#INSTALL SORTABLE

https://github.com/livewire/sortable

./vendor/bin/sail npm i livewire-sortable --save-dev

#INSTALL PACKAGES JS

./vendor/bin/sail npm i @tailwindcss/aspect-ratio

./vendor/bin/sail npm i tw-elements

#ALTER MODE USER

use Illuminate\Foundation\Auth\User as Authenticatable;
para
use Tall\Acl\Models\User as Authenticatable;

Registra a Factory Menu em config/app.php 'aliases'

  'Menu' => Tall\Menus\Facades\Menu::class,

#ADD PHPMYADMIN DOCKERCOMPOSER

pode ser abaixo  do serviço do mysql

phpmyadmin:
    image: phpmyadmin/phpmyadmin:latest
    links:
        - mysql
    ports:
        - 8001:80
    environment:
        - PMA_ARBITRARY=1
        - UPLOAD_LIMIT=100m
    networks:
        - sail

#ALTERAR A TABLE SESSIONS

Schema::create('sessions', function (Blueprint $table) { $table->string('id')->primary(); //$table->foreignId('user_id')->nullable()->index(); $table->foreignUuid('user_id')->nullable()->index(); $table->string('ip_address', 45)->nullable(); $table->text('user_agent')->nullable(); $table->longText('payload'); $table->integer('last_activity')->index(); });

tambem pode dar alguns comflitos com a tabela de users

#PUBLICAR AS FACTORIES E SEEDERS

./vendor/bin/sail artisan vendor:publish --tag=tenant-factories --force
 or 
sail artisan vendor:publish --tag=tenant-factories --force

#PUBLICAR OS JS FILES PRINCIPALMENTE PARA O ADMIN

./vendor/bin/sail artisan vendor:publish --tag=tall-theme-js --force
 or 
sail artisan vendor:publish --tag=tall-theme-js --force

#RODAR AS MIGRATIONS E SEEDERS Use a tag --seed para criar dados fakes

banco novo --> ./vendor/bin/sail artisan migrate --seed
recriar banco --> ./vendor/bin/sail artisan migrate:fresh --seed

Será gerado um user:
    email: test@example.com
    password: password

#PUBLICAR AS CONFIG

./vendor/bin/sail  artisan vendor:publish --tag=tall-theme-config --force

#PUBLICAR AS VIEWS

./vendor/bin/sail artisan vendor:publish --tag=tall-theme-views --force

#PUBLICAR AS VIEWS

./vendor/bin/sail artisan vendor:publish --tag=tall-theme-img --force

从 Vite 迁移到 Laravel Mix

安装 Laravel Mix

首先，您需要使用您选择的 npm 包管理器安装 Laravel Mix

npm install --save-dev laravel-mix

配置 Mix

在项目的根目录中创建一个 webpack.mix.js 文件

const mix = require('laravel-mix');

/*
 |--------------------------------------------------------------------------
 | Mix Asset Management
 |--------------------------------------------------------------------------
 |
 | Mix provides a clean, fluent API for defining some Webpack build steps
 | for your Laravel applications. By default, we are compiling the CSS
 | file for the application as well as bundling up all the JS files.
 |
 */

mix.js('resources/js/app.js', 'public/js')
    .postCss('resources/css/app.css', 'public/css', [
        //
    ]);

更新 NPM 脚本

在 package.json 中更新您的 NPM 脚本

  "scripts": {
-     "dev": "vite",
-     "build": "vite build"
+     "dev": "npm run development",
+     "development": "mix",
+     "watch": "mix watch",
+     "watch-poll": "mix watch -- --watch-options-poll=1000",
+     "hot": "mix watch --hot",
+     "prod": "npm run production",
+     "production": "mix --production"
  }

Inertia

Vite 需要一个辅助函数来导入页面组件，而 Laravel Mix 不需要。您可以按如下方式删除它

- import { resolvePageComponent } from 'laravel-vite-plugin/inertia-helpers';

  createInertiaApp({
      title: (title) => `${title} - ${appName}`,
-     resolve: (name) => resolvePageComponent(`./Pages/${name}.vue`, import.meta.glob('./Pages/**/*.vue')),
+     resolve: (name) => require(`./Pages/${name}.vue`),
      setup({ el, app, props, plugin }) {
          return createApp({ render: () => h(app, props) })
              .use(plugin)
              .mixin({ methods: { route } })
              .mount(el);
      },
  });

更新环境变量

您需要更新在您的 .env 文件和诸如 Forge 之类的托管环境中明确暴露的环境变量，以使用 MIX_ 前缀而不是 VITE_

- VITE_PUSHER_APP_KEY="${PUSHER_APP_KEY}"
- VITE_PUSHER_APP_CLUSTER="${PUSHER_APP_CLUSTER}"
+ MIX_PUSHER_APP_KEY="${PUSHER_APP_KEY}"
+ MIX_PUSHER_APP_CLUSTER="${PUSHER_APP_CLUSTER}"

您还需要在 JavaScript 代码中更新这些引用，以使用新的变量名和 Node 语法

-    key: import.meta.env.VITE_PUSHER_APP_KEY,
-    cluster: import.meta.env.VITE_PUSHER_APP_CLUSTER,
+    key: process.env.MIX_PUSHER_APP_KEY,
+    cluster: process.env.MIX_PUSHER_APP_CLUSTER,

从您的 JavaScript 入口点中删除 CSS 导入

如果您通过 JavaScript 导入 CSS，您需要删除这些语句

- import '../css/app.css';

将 @vite 替换为 mix()

您需要将 @vite Blade 指令替换为 <script> 和 <link rel="stylesheet"> 标签以及 mix() 辅助函数

- @viteReactRefresh
- @vite('resources/js/app.js')
+ <link rel="stylesheet" href="{{ mix('css/app.css') }}">
+ <script src="{{ mix('js/app.js') }}" defer></script>

删除 Vite 和 Laravel 插件

Vite 和 Laravel 插件现在可以卸载

npm remove vite laravel-vite-plugin

接下来，您可以删除您的 Vite 配置文件

rm vite.config.js

配置 tailwind.config

const defaultTheme = require('tailwindcss/defaultTheme');

module.exports = {
    presets:[
        require('./vendor/wireui/wireui/tailwind.config.js'),
        require('./vendor/callcocam/packages-tall/tailwind.config.js'),
    ],
    content: [
        './vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php',
        './vendor/laravel/jetstream/**/*.blade.php',
        './storage/framework/views/*.php',
        './resources/views/**/*.blade.php',
        './vendor/wireui/wireui/resources/**/*.blade.php',
        './vendor/wireui/wireui/ts/**/*.ts',
        './vendor/wireui/wireui/src/View/**/*.php'
    ],
    theme: {
        extend: {
            fontFamily: {
                sans: ['Nunito', ...defaultTheme.fontFamily.sans],
            },
        },
    },

    plugins: [require('@tailwindcss/forms'), require('@tailwindcss/typography')],
};