Vue

Vue 入门套件基于 Inertia 2、Vue 3 组合式 API、Tailwind 和 shadcn-vue 构建

resources/js/
├── components/    # 可复用的 Vue 组件
├── composables/   # Vue 组合式函数 / 钩子
├── layouts/       # 应用程序布局
├── lib/           # 工具函数和配置
├── pages/         # 页面组件
└── types/         # TypeScript 定义

要发布额外的 shadcn-vue 组件，首先 找到你想要发布的组件。然后，使用 npx 发布该组件：

npx shadcn-vue@latest add switch

该命令会将 Switch 组件发布到 resources/js/components/ui/Switch.vue

<script setup lang="ts">
import { Switch } from '@/components/ui/switch'
</script>

<template>
    <div>
        <Switch />
    </div>
</template>

可用的布局

Vue 入门套件包含两种不同的主要布局供你选择：“侧边栏”布局和“头部”布局。侧边栏布局是默认的，但你可以通过修改应用程序的 resources/js/layouts/AppLayout.vue 文件顶部导入的布局来切换到头部布局：

import AppLayout from '@/layouts/app/AppSidebarLayout.vue';
import AppLayout from '@/layouts/app/AppHeaderLayout.vue';

侧边栏变体

侧边栏布局包含三种不同的变体：默认侧边栏变体、“嵌入”变体和“浮动”变体。你可以通过修改 resources/js/components/AppSidebar.vue 组件来选择你最喜欢的变体

<Sidebar collapsible="icon" variant="sidebar">

<Sidebar collapsible="icon" variant="inset">

认证页面布局变体

Vue 入门套件中包含的认证页面，如登录页面和注册页面，也提供了三种不同的布局变体：“简单”、“卡片”和“分割”。

要更改你的认证布局，请修改应用程序的 resources/js/layouts/AuthLayout.vue 文件顶部导入的布局：

import AuthLayout from '@/layouts/auth/AuthSimpleLayout.vue';
import AuthLayout from '@/layouts/auth/AuthSplitLayout.vue';