Primevue Grid 和 Flex 布局无法正确呈现

Question

非 WebDev 在此尝试在 vue3 上使用 primevue 构建基本 UI。尝试运行基本演示，但包含一些组件。不知道组件是否带有自己的 CSS 依赖项。

下面是我的 html 代码。我也尝试过使用带有单独组件的 vue 项目并得到相同的结果

基本示例失败：

<html>
    <head>
        <meta charset="utf-8">
        <title>PrimeVue Demo</title>
        <link href="https://unpkg.com/primevue/resources/themes/saga-blue/theme.css" rel="stylesheet">
        <link href="https://unpkg.com/primevue/resources/primevue.min.css" rel="stylesheet">
        <link href="https://unpkg.com/primeicons/primeicons.css" rel="stylesheet">

        <script src="https://unpkg.com/vue@next"></script>
        <script src="https://unpkg.com/primevue/inputtext/inputtext.min.js"></script>
    </head>

    <body>
        <div id="app">
            <p-inputtext v-model="val"></p-inputtext>
            <h6>{{val}}</h6>
        </div>


<div class="p-d-flex">
    <div class="p-mr-2">Item 1</div>
    <div class="p-mr-2">Item 2</div>
    <div>Item 3</div>
</div>

<div class="p-grid">
    <div class="p-col-4">4</div>
    <div class="p-col">1</div>
    <div class="p-col">1</div>
    <div class="p-col">1</div>
    <div class="p-col">1</div>
    <div class="p-col">1</div>
    <div class="p-col">1</div>
    <div class="p-col">1</div>
    <div class="p-col">1</div>
</div>

<div class="p-grid">
    <div class="p-col-2">2</div>
    <div class="p-col-6">6</div>
    <div class="p-col-4">4</div>
</div>

        <script>
            const {createApp, ref} = Vue;

            const App = {
                setup() {
                    const val = ref(null);

                    return {
                        val
                    };
                },
                components: {
                    'p-inputtext': primevue.inputtext
                } 
            };

            createApp(App).mount("#app");
        </script>
    </body>
</html>

应为弹性项目呈现 1 行，为网格布局中的数字呈现 2 行。相反，它呈现没有样式的所有行。我错过了什么？：

Answer 1

为了使用prime vue的flex和grid布局，需要加载PrimeFlex。

https://primefaces.org/primevue/showcase/#/primeflex

文档只有 npm 设置，但您可以包含以下内容 link。

<link href="https://cdn.jsdelivr.net/npm/primeflex@2.0.0/primeflex.min.css" rel="stylesheet">

Answer 2

如果你通过 npm 完成，安装包后，不要忘记包含 CSS 文件，在我的例子中，我将它包含在我的 main.js 中只需添加这一行。

import 'primeflex/primeflex.css';

https://primefaces.org/primevue/showcase/#/primeflex

Answer 3

CDN方法有效！！但是我下载了文件并放置了这个

   <link rel="stylesheet" href="static/primevue/primeflex.min.css" />

在我的 html 文件的头部部分。

但是它没有按照文档工作。我必须删除 p- 才能工作：

<div id="app" class="grid">
  <div class="col">1</div>
  <div class="col">2</div>
  <div class="col">3</div>
</div>

Primevue Grid 和 Flex 布局无法正确呈现

Primevue Grid and Flex layouts not rendering correctly

flexbox

css-grid

vue.js

primevue