Skip to main content
快速开始 / 前端设置

前端设置

Escalated以npm包的形式提供共享的Inertia.js + Vue 3 UI。所有框架使用相同的前端。

1. 安装npm包

npm install @escalated-dev/escalated

2. 添加到Tailwind内容配置

确保Tailwind扫描Escalated组件的类名:

export default {
  content: [
    './resources/**/*.vue',
    './node_modules/@escalated-dev/escalated/src/**/*.vue',
  ],
}

?? Tailwind CSS v4+???????? CSS ???? Escalated ??? source:

/* resources/css/app.css */
@source '../../node_modules/@escalated-dev/escalated/src/**/*.vue';

???? CSS ?????????????????

3. 配置Inertia页面解析器

?????????????? Inertia ? Vue?

Escalated/为前缀的页面将从npm包中解析:

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

// 预先glob Escalated页面
const escalatedPages = import.meta.glob(
  '../../node_modules/@escalated-dev/escalated/src/pages/**/*.vue'
);

createInertiaApp({
  resolve: (name) => {
    if (name.startsWith('Escalated/')) {
      const path = name.replace('Escalated/', '');
      return resolvePageComponent(
        `../../node_modules/@escalated-dev/escalated/src/pages/${path}.vue`,
        escalatedPages
      );
    }
    return resolvePageComponent(
      `./Pages/${name}.vue`,
      import.meta.glob('./Pages/**/*.vue')
    );
  },
});