Flex 列 PrimeVue 问题

Question

我刚刚开始使用 PrimeVue 并遇到了一个愚蠢的问题。我不明白为什么 flexbox 类不起作用。我完全按照文档进行操作，并尝试显示带有提示的输入，但元素是按行对齐，而不是彼此堆叠。我做错了什么？

这是导入代码。

import { createApp } from 'vue'
import { createPinia } from 'pinia'

import PrimeVue from 'primevue/config';

import App from './App.vue'
import router from './router'

import 'primevue/resources/themes/mdc-dark-indigo/theme.css'

import InputText from 'primevue/inputtext';


const app = createApp(App)

app.use(createPinia())
app.use(PrimeVue)
app.use(router)

app.component('InputText', InputText)


app.mount('#app')

这是组件代码。

<script setup lang="ts">

import { ref } from 'vue';

const value = ref(null);

</script>


<template>
  <div class="flex flex-column gap-2">
    <label for="username">Username</label>
    <InputText id="username" v-model="value" aria-describedby="username-help" />
    <small id="username-help">Enter your username to reset your password.</small>
</div>
</template>

我尝试添加此导入，但没有帮助。

import 'primevue/resources/primevue.min.css'

Answer 1

Flex 类实际上是一个名为 PrimeFlex 的单独实用程序库的一部分，您需要安装：

npm install primeflex

然后在main.js或main.ts中导入CSS

import 'primeflex/primeflex.css'