PrimeVue 完全指南

官方文档：https://primevue.org/
适用版本：PrimeVue 4.x（2026-05-07 核实）

PrimeVue 是 PrimeTek 出品的 Vue 3 UI 组件库，提供 90+ 开箱即用的组件。v4 在 v3 基础上进行了重大架构调整：以 CSS 变量和设计令牌体系替代了 SASS 主题，并引入了 PassThrough（PT）API 实现完全无样式模式。

安装与配置

Vite 项目安装

npm install primevue @primevue/themes
# 图标库（可选，但常用）
npm install primeicons

main.ts 配置

import { createApp } from 'vue'
import PrimeVue from 'primevue/config'
import Aura from '@primevue/themes/aura'
import ToastService from 'primevue/toastservice'
import ConfirmationService from 'primevue/confirmationservice'
import App from './App.vue'

const app = createApp(App)

app.use(PrimeVue, {
  theme: {
    preset: Aura,
    options: {
      prefix: 'p',              // CSS 变量前缀，默认 'p'
      darkModeSelector: 'system', // 'system' | '.dark' | 'media' | false
      cssLayer: false           // 是否注入 @layer 以降低样式优先级（与 Tailwind 配合时设 true）
    }
  },
  ripple: true,                 // 全局启用水波纹效果
  inputVariant: 'outlined',    // 'outlined' | 'filled'，全局输入框变体
  locale: {                     // 可选：本地化配置
    accept: '确认',
    reject: '取消',
    // ... 其余语言包字段
  }
})

app.use(ToastService)
app.use(ConfirmationService)

app.mount('#app')

配置参数总表

主题系统

内置预设

PrimeVue v4 提供三种开箱即用的主题预设：

设计令牌三层架构

Primitive 令牌（基础色板）
  └── 如 blue-500、surface-200
Semantic 令牌（语义映射）
  └── 如 primary.color → {blue.500}
Component 令牌（组件专属）
  └── 如 button.background → {primary.color}

CSS 变量命名规则：--p-{组件}-{属性}，如 --p-button-background。

definePreset — 扩展自定义主题

import { definePreset } from '@primevue/themes'
import Aura from '@primevue/themes/aura'

const MyPreset = definePreset(Aura, {
  // 覆盖 Semantic 令牌：将主色改为靛蓝色系
  semantic: {
    primary: {
      50:  '{indigo.50}',
      100: '{indigo.100}',
      200: '{indigo.200}',
      300: '{indigo.300}',
      400: '{indigo.400}',
      500: '{indigo.500}',
      600: '{indigo.600}',
      700: '{indigo.700}',
      800: '{indigo.800}',
      900: '{indigo.900}',
      950: '{indigo.950}'
    },
    colorScheme: {
      light: {
        primary: {
          color: '{primary.500}',
          contrastColor: '#ffffff',
          hoverColor: '{primary.600}',
          activeColor: '{primary.700}'
        },
        surface: {
          0:   '#ffffff',
          50:  '{zinc.50}',
          100: '{zinc.100}',
          200: '{zinc.200}',
          300: '{zinc.300}',
          400: '{zinc.400}',
          500: '{zinc.500}',
          600: '{zinc.600}',
          700: '{zinc.700}',
          800: '{zinc.800}',
          900: '{zinc.900}',
          950: '{zinc.950}'
        }
      },
      dark: {
        primary: {
          color: '{primary.400}',
          contrastColor: '{surface.900}',
          hoverColor: '{primary.300}',
          activeColor: '{primary.200}'
        }
      }
    }
  },
  // 覆盖 Component 令牌：自定义按钮样式
  components: {
    button: {
      colorScheme: {
        light: {
          root: {
            background: '{primary.500}',
            hoverBackground: '{primary.600}',
            color: '#ffffff'
          }
        }
      }
    }
  }
})

export default MyPreset

在 main.ts 中引用：

app.use(PrimeVue, {
  theme: { preset: MyPreset }
})

运行时切换主题

import { usePreset, updatePreset } from '@primevue/themes'
import Lara from '@primevue/themes/lara'

// 切换到 Lara 预设
usePreset(Lara)

// 动态更新部分令牌（不切换预设）
updatePreset({
  semantic: {
    primary: {
      500: '#22c55e'
    }
  }
})

暗色模式

// 方式一：跟随系统
app.use(PrimeVue, {
  theme: { preset: Aura, options: { darkModeSelector: 'system' } }
})

// 方式二：手动切换 CSS 类
app.use(PrimeVue, {
  theme: { preset: Aura, options: { darkModeSelector: '.dark' } }
})

// 在组件中切换
document.documentElement.classList.toggle('dark')

PassThrough (PT) API

PassThrough API 允许将自定义属性、类名、样式注入到组件内部任意 DOM 节点，无需覆盖 CSS 变量。

全局 PT 配置

app.use(PrimeVue, {
  theme: { preset: Aura },
  pt: {
    button: {
      root: { class: 'font-bold' },
      label: { class: 'tracking-wide' }
    },
    datatable: {
      root: { class: 'border rounded-lg' },
      thead: { class: 'bg-gray-50' }
    }
  }
})

组件级 PT

<Button
  label="提交"
  :pt="{
    root: { class: 'my-custom-btn', 'data-testid': 'submit-btn' },
    label: { style: 'letter-spacing: 0.1em' }
  }"
/>

PT 合并策略

当同时存在全局 PT 和组件级 PT 时，默认后者覆盖前者。可通过 ptOptions 配置合并策略：

app.use(PrimeVue, {
  ptOptions: {
    mergeSections: true,    // 合并各 section 的类名（而非覆盖）
    mergeProps: true        // 合并属性（而非覆盖）
  }
})

无样式（Unstyled）模式

完全移除 PrimeVue 内置样式，结合 Tailwind CSS 使用：

app.use(PrimeVue, {
  unstyled: true,
  pt: {
    button: {
      root: { class: 'px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 transition-colors' }
    }
  }
})

Nuxt 3 集成

npm install primevue @primevue/themes
npm install -D @primevue/nuxt-module

// nuxt.config.ts
import Aura from '@primevue/themes/aura'

export default defineNuxtConfig({
  modules: ['@primevue/nuxt-module'],

  primevue: {
    autoImport: true,  // 自动注册所有组件（默认开启，支持 Tree-shaking）
    options: {
      theme: {
        preset: Aura,
        options: {
          darkModeSelector: '.dark'
        }
      },
      ripple: true
    },
    // 仅引入指定组件（autoImport: false 时生效）
    components: {
      include: ['Button', 'DataTable', 'Dialog', 'InputText', 'Select']
    }
  }
})

常用组件 API

Button

<Button
  label="提交"
  icon="pi pi-check"
  icon-pos="right"
  severity="primary"
  :loading="isLoading"
  @click="handleClick"
/>

InputText

<InputText v-model="value" placeholder="请输入..." size="large" fluid />

Select（v3 的 Dropdown）

<Select
  v-model="selected"
  :options="cities"
  option-label="name"
  option-value="code"
  placeholder="请选择城市"
  filter
  fluid
/>

DatePicker（v3 的 Calendar）

<DatePicker
  v-model="date"
  date-format="yy-mm-dd"
  :min-date="minDate"
  :max-date="maxDate"
  show-icon
  show-button-bar
/>

DataTable

DataTable 是功能最丰富的组件，支持排序、筛选、分页、行选择、行展开、懒加载、虚拟滚动等。

<DataTable
  :value="products"
  v-model:selection="selectedProducts"
  v-model:filters="filters"
  selection-mode="multiple"
  data-key="id"
  :paginator="true"
  :rows="10"
  :rows-per-page-options="[5, 10, 25, 50]"
  sort-mode="multiple"
  filter-display="row"
  :loading="loading"
  :lazy="true"
  :total-records="totalRecords"
  @page="onPage"
  @sort="onSort"
  @filter="onFilter"
>
  <template #header>
    <div class="flex justify-between">
      <span>产品列表</span>
      <InputText v-model="filters['global'].value" placeholder="全局搜索" />
    </div>
  </template>

  <Column selection-mode="multiple" style="width: 3rem" />
  <Column field="name" header="名称" sortable />
  <Column field="price" header="价格" sortable>
    <template #body="{ data }">
      ¥{{ data.price.toFixed(2) }}
    </template>
  </Column>
  <Column field="status" header="状态" filter-field="status" :show-filter-menu="false">
    <template #filter="{ filterModel, filterCallback }">
      <Select
        v-model="filterModel.value"
        :options="statuses"
        placeholder="筛选状态"
        @change="filterCallback()"
      />
    </template>
  </Column>
</DataTable>

DataTable 属性（常用）

DataTable 事件

DataTable 插槽

Column 属性

Column 插槽

筛选初始化示例

import { FilterMatchMode } from '@primevue/core/api'

const filters = ref({
  global:   { value: null, matchMode: FilterMatchMode.CONTAINS },
  name:     { value: null, matchMode: FilterMatchMode.STARTS_WITH },
  status:   { value: null, matchMode: FilterMatchMode.EQUALS },
  price:    { value: null, matchMode: FilterMatchMode.GREATER_THAN }
})

可用 FilterMatchMode 值：STARTS_WITH、CONTAINS、NOT_CONTAINS、ENDS_WITH、EQUALS、NOT_EQUALS、IN、LESS_THAN、LESS_THAN_OR_EQUAL_TO、GREATER_THAN、GREATER_THAN_OR_EQUAL_TO、BETWEEN、DATE_IS、DATE_IS_NOT、DATE_BEFORE、DATE_AFTER。

Dialog

<Button label="打开" @click="visible = true" />

<Dialog
  v-model:visible="visible"
  header="确认操作"
  :modal="true"
  :draggable="true"
  :closable="true"
  :style="{ width: '30rem' }"
  :breakpoints="{ '960px': '75vw', '641px': '100vw' }"
>
  <p>确认要执行此操作吗？</p>
  <template #footer>
    <Button label="取消" text @click="visible = false" />
    <Button label="确认" @click="onConfirm" />
  </template>
</Dialog>

Drawer（v3 的 Sidebar）

<Drawer v-model:visible="drawerVisible" header="菜单" position="left">
  <nav>
    <ul>
      <li>首页</li>
      <li>关于</li>
    </ul>
  </nav>
</Drawer>

Toast 服务

注册服务

// main.ts
import ToastService from 'primevue/toastservice'
app.use(ToastService)

放置 Toast 容器（通常在 App.vue）

<template>
  <Toast />
  <RouterView />
</template>

在组件中使用

import { useToast } from 'primevue/usetoast'

const toast = useToast()

// 各种类型
toast.add({ severity: 'success', summary: '成功', detail: '操作已完成', life: 3000 })
toast.add({ severity: 'info',    summary: '提示', detail: '这是一条信息' })
toast.add({ severity: 'warn',    summary: '警告', detail: '请注意此操作' })
toast.add({ severity: 'error',   summary: '错误', detail: '操作失败，请重试', sticky: true })
toast.add({ severity: 'secondary', summary: '次要', detail: '次要消息' })
toast.add({ severity: 'contrast', summary: '对比', detail: '对比色消息' })

// 清除
toast.remove(toastInstance)  // 移除指定
toast.removeGroup('myGroup') // 移除指定分组
toast.removeAllGroups()      // 移除所有

Toast 消息选项

Toast 组件属性

ConfirmDialog / ConfirmPopup 服务

注册服务

// main.ts
import ConfirmationService from 'primevue/confirmationservice'
app.use(ConfirmationService)

放置容器

<ConfirmDialog />
<!-- 或气泡确认 -->
<ConfirmPopup />

在组件中使用

import { useConfirm } from 'primevue/useconfirm'

const confirm = useConfirm()

// 对话框确认
confirm.require({
  message:  '确定要删除吗？此操作不可逆。',
  header:   '删除确认',
  icon:     'pi pi-exclamation-triangle',
  rejectLabel:   '取消',
  acceptLabel:   '确认删除',
  rejectProps:   { label: '取消', severity: 'secondary', outlined: true },
  acceptProps:   { label: '确认删除', severity: 'danger' },
  accept: () => {
    toast.add({ severity: 'info', summary: '已删除', life: 3000 })
  },
  reject: () => {
    toast.add({ severity: 'warn', summary: '已取消', life: 3000 })
  }
})

// 气泡确认（需要目标元素）
confirm.require({
  target:  event.currentTarget,
  message: '确认删除？',
  icon:    'pi pi-info-circle',
  accept:  () => doDelete()
})

Popover（v3 的 OverlayPanel）

<Button label="更多信息" @click="pop.toggle($event)" />
<Popover ref="pop">
  <div class="p-4">
    <p>这是弹出内容</p>
  </div>
</Popover>

const pop = ref()

// 方法
pop.value.show(event)   // 显示
pop.value.hide()        // 隐藏
pop.value.toggle(event) // 切换

Tabs（v3 的 TabView）

<Tabs value="0">
  <TabList>
    <Tab value="0">首页</Tab>
    <Tab value="1">关于</Tab>
    <Tab value="2">联系</Tab>
  </TabList>
  <TabPanels>
    <TabPanel value="0">
      <p>首页内容</p>
    </TabPanel>
    <TabPanel value="1">
      <p>关于内容</p>
    </TabPanel>
  </TabPanels>
</Tabs>

Accordion

<Accordion value="0">
  <AccordionPanel value="0">
    <AccordionHeader>标题一</AccordionHeader>
    <AccordionContent>
      <p>内容一</p>
    </AccordionContent>
  </AccordionPanel>
  <AccordionPanel value="1">
    <AccordionHeader>标题二</AccordionHeader>
    <AccordionContent>
      <p>内容二</p>
    </AccordionContent>
  </AccordionPanel>
</Accordion>

InputNumber

<InputNumber
  v-model="price"
  prefix="¥"
  :min="0"
  :max="9999"
  :min-fraction-digits="2"
  :max-fraction-digits="2"
  :use-grouping="true"
  locale="zh-CN"
  mode="currency"
  currency="CNY"
  fluid
/>

AutoComplete

<AutoComplete
  v-model="value"
  :suggestions="items"
  @complete="search"
  option-label="name"
  force-selection
  :multiple="false"
  fluid
>
  <template #option="{ option }">
    <div class="flex items-center gap-2">
      <img :src="option.avatar" class="w-6 h-6 rounded-full" />
      <span>{{ option.name }}</span>
    </div>
  </template>
</AutoComplete>

const search = (event: { query: string }) => {
  items.value = allItems.filter(item =>
    item.name.toLowerCase().includes(event.query.toLowerCase())
  )
}

FileUpload

<FileUpload
  name="file"
  url="/api/upload"
  :multiple="true"
  accept="image/*"
  :max-file-size="1000000"
  :auto="false"
  @upload="onUpload"
  @before-upload="onBeforeUpload"
  @error="onError"
/>

Menu / MenuBar / TieredMenu / ContextMenu

<!-- Menu（弹出式） -->
<Button label="操作" @click="menu.toggle($event)" />
<Menu ref="menu" :model="menuItems" :popup="true" />

<!-- Menubar（顶部导航） -->
<Menubar :model="navItems">
  <template #start>
    <img src="/logo.svg" class="h-8" />
  </template>
  <template #end>
    <Button label="登录" />
  </template>
</Menubar>

<!-- ContextMenu（右键菜单） -->
<ContextMenu ref="cm" :model="contextItems" />
<div @contextmenu="cm.show($event)">右键点击此区域</div>

菜单 model 的数据结构：

const menuItems = ref([
  {
    label: '文件',
    icon: 'pi pi-file',
    items: [
      { label: '新建', icon: 'pi pi-plus', command: () => createFile() },
      { label: '打开', icon: 'pi pi-folder-open', command: () => openFile() },
      { separator: true },
      { label: '退出', icon: 'pi pi-sign-out', command: () => exit() }
    ]
  },
  {
    label: '外部链接',
    icon: 'pi pi-external-link',
    url: 'https://example.com',
    target: '_blank'
  },
  {
    label: '路由',
    icon: 'pi pi-home',
    route: '/home'  // 配合 vue-router 使用
  }
])

菜单项字段：

Stepper（v3 的 Steps）

<Stepper v-model:value="activeStep" linear>
  <StepList>
    <Step value="1">账户信息</Step>
    <Step value="2">个人资料</Step>
    <Step value="3">完成</Step>
  </StepList>
  <StepPanels>
    <StepPanel value="1" v-slot="{ activateCallback }">
      <div>步骤一内容</div>
      <Button label="下一步" @click="activateCallback('2')" />
    </StepPanel>
    <StepPanel value="2" v-slot="{ activateCallback }">
      <div>步骤二内容</div>
      <Button label="上一步" @click="activateCallback('1')" />
      <Button label="下一步" @click="activateCallback('3')" />
    </StepPanel>
    <StepPanel value="3">
      <div>完成！</div>
    </StepPanel>
  </StepPanels>
</Stepper>

Chart

基于 Chart.js，需额外安装：

npm install chart.js

<Chart type="bar" :data="chartData" :options="chartOptions" style="height: 400px" />

const chartData = ref({
  labels: ['一月', '二月', '三月', '四月'],
  datasets: [
    {
      label: '销售额',
      data: [65, 59, 80, 81],
      backgroundColor: ['rgba(255, 99, 132, 0.2)', 'rgba(255, 159, 64, 0.2)']
    }
  ]
})

const chartOptions = ref({
  responsive: true,
  plugins: {
    legend: { position: 'top' }
  }
})

表单验证集成

与 VeeValidate + Zod 集成

npm install vee-validate zod @vee-validate/zod

<script setup lang="ts">
import { useForm } from 'vee-validate'
import { toTypedSchema } from '@vee-validate/zod'
import { z } from 'zod'

const schema = toTypedSchema(z.object({
  username: z.string().min(3, '用户名至少 3 位').max(20),
  email:    z.string().email('邮箱格式不正确'),
  age:      z.number({ required_error: '请填写年龄' }).min(18, '须年满 18 岁')
}))

const { handleSubmit, defineField, errors, isSubmitting } = useForm({
  validationSchema: schema
})

const [username, usernameAttrs] = defineField('username')
const [email, emailAttrs] = defineField('email')
const [age, ageAttrs] = defineField('age')

const onSubmit = handleSubmit(async (values) => {
  console.log('提交值：', values)
})
</script>

<template>
  <form @submit.prevent="onSubmit">
    <div class="flex flex-col gap-1 mb-4">
      <label>用户名</label>
      <InputText v-model="username" v-bind="usernameAttrs" :invalid="!!errors.username" />
      <small class="text-red-500">{{ errors.username }}</small>
    </div>

    <div class="flex flex-col gap-1 mb-4">
      <label>邮箱</label>
      <InputText v-model="email" v-bind="emailAttrs" :invalid="!!errors.email" />
      <small class="text-red-500">{{ errors.email }}</small>
    </div>

    <div class="flex flex-col gap-1 mb-4">
      <label>年龄</label>
      <InputNumber v-model="age" v-bind="ageAttrs" :invalid="!!errors.age" fluid />
      <small class="text-red-500">{{ errors.age }}</small>
    </div>

    <Button type="submit" label="提交" :loading="isSubmitting" />
  </form>
</template>

与 Tailwind CSS 配合

启用 cssLayer 使 Tailwind 的工具类可以覆盖 PrimeVue 样式：

// main.ts
app.use(PrimeVue, {
  theme: {
    preset: Aura,
    options: {
      cssLayer: {
        name: 'primevue',
        order: 'tailwind-base, primevue, tailwind-utilities'
      }
    }
  }
})

/* tailwind.css */
@layer tailwind-base {
  @tailwind base;
}
@layer tailwind-utilities {
  @tailwind utilities;
}

组件完整清单

v3 → v4 更名对照

v4 废弃组件

按分类列举全部组件

表单

数据展示

面板

覆盖层

消息

菜单

其他

无障碍（Accessibility）

PrimeVue v4 按照 WAI-ARIA 1.2 规范构建。

• 所有交互组件均内置 aria-* 属性
• 支持键盘导航（Tab、方向键、Enter、Space、Esc）
• 提供 ariaLabel、ariaLabelledBy 等属性供自定义
• 使用 <PrimeVuePassThrough> 或 PT API 可进一步定制 aria 属性

常见踩坑

1. v4 不再引入旧版 CSS

// v3 写法（v4 中删除）
import 'primevue/resources/themes/lara-light-blue/theme.css'
import 'primevue/resources/primevue.min.css'

v4 通过 @primevue/themes 的 JS 对象统一管理主题，无需引入任何 CSS 文件。

2. API 路径变更

// v3
import { FilterMatchMode } from 'primevue/api'

// v4
import { FilterMatchMode } from '@primevue/core/api'

3. p-fluid 类废弃

v3 中包裹 <div class="p-fluid"> 可使内部组件撑满宽度；v4 中改为在组件上使用 fluid prop：

<!-- v3 -->
<div class="p-fluid">
  <InputText v-model="val" />
</div>

<!-- v4 -->
<InputText v-model="val" fluid />

4. Dark Mode 与 SSR 水合不匹配

Nuxt 3 中使用 darkModeSelector: '.dark' 并配合 @nuxtjs/color-mode 时，确保服务端和客户端的初始类名一致，否则会出现 Hydration Mismatch。

5. DataTable 懒加载 totalRecords 必须提前设置

lazy: true 时，分页器需要 totalRecords 才能计算页数。初始加载时应在获取第一页数据的同时设置 totalRecords。

6. Tooltip 指令注册

使用 v-tooltip 前需注册：

import Tooltip from 'primevue/tooltip'
app.directive('tooltip', Tooltip)
// 或在 Nuxt 中通过 directives 配置自动注册

最佳实践

选用 Unstyled 模式 + Tailwind，而非 Styled 模式：PrimeVue v4 的 Unstyled 模式（unstyled: true）允许完全自定义样式，配合 tailwindcss-primeui 插件可以用 Tailwind 类名控制组件外观，避免主题覆盖战。Styled 模式适合快速原型，Unstyled 模式适合需要严格设计系统的项目。

使用 PassThrough API 为单个组件实例添加 class，而非全局覆盖 CSS：通过 :pt prop 可以精确控制组件内部 DOM 节点的类名，比写全局 CSS 选择器更可预期且不影响其他组件实例。

<DataTable :pt="{ root: { class: 'border rounded-lg' }, header: { class: 'bg-gray-50' } }">

DataTable 分页用受控模式（:rows + @page），而非非受控：非受控模式下，分页状态由组件内部管理，无法与 URL、路由或外部状态同步。受控模式将 first、rows 状态提升到外部，便于持久化和服务端分页。

表单组件与 Vee-Validate 或 Vue-Formkit 集成时，使用 v-bind 传递错误状态而非包装层：PrimeVue v4 的表单组件接受 invalid prop，直接绑定校验库的错误状态即可，无需额外包装组件。

<InputText v-model="email" :invalid="!!errors.email" />
<small class="text-red-500">{{ errors.email }}</small>

图标使用 primeicons 类名时检查版本兼容性：PrimeIcons 在大版本更新时会重命名部分图标（如 pi-home → pi-house），升级后应全量搜索项目中的 pi- 类名进行核对。

常见陷阱

陷阱：Styled 模式下自定义 CSS 被覆盖

现象： 通过全局 CSS 修改 DataTable 行高或颜色，在开发环境生效，生产构建后失效；或某些状态（hover、selected）样式无法覆盖。

原因： PrimeVue Styled 模式的主题 CSS 使用了较高特异性的选择器，全局 class 覆盖时特异性不够；生产构建中 CSS 加载顺序可能与开发环境不同。

解决： 升级到 Unstyled 模式使用 PT API 控制样式；或用 :deep() 穿透 Scoped CSS；或在主题 CSS 后引入自定义 CSS 以保证顺序。

<style scoped>
:deep(.p-datatable-row-selected) {
  background: #e0f2fe !important;
}
</style>

陷阱：v-model 在 Dialog 内的组件数据不同步

现象： Dialog 打开后修改了表单数据，关闭再打开时，数据没有重置或显示了上次的值。

原因： Dialog 组件默认在关闭时不销毁内部 DOM（仅隐藏），Vue 组件状态保留，下次打开时仍是上次的值。

解决： 使用 :visible 控制显隐时，在 @hide 事件中手动重置表单数据；或使用 v-if 替代 v-show 控制 Dialog，每次打开都重新挂载组件。

<Dialog v-model:visible="showDialog" @hide="resetForm">

陷阱：DataTable 懒加载时 totalRecords 未同步导致分页异常

现象： 服务端分页时，分页器显示的总页数不对，或跳转到最后一页后无数据。

原因： lazy: true 时，DataTable 分页器完全依赖 totalRecords prop 计算总页数，若首次加载时未设置或设置了错误的值，分页计算会出错。

解决： 在获取第一页数据的同时从接口返回 total 并赋值给 totalRecords，确保与数据同步更新。

<DataTable :value="rows" :lazy="true" :totalRecords="total" @page="onPage">

参见

• Vue3入门
• Pinia完全指南
• TailwindCSS完全指南
• Nuxt3完全指南