Vue 3 网格不再工作，我做错了什么？答案

【问题标题】：Vue 3 grid not working any more, what am I doing wrong?Vue 3 网格不再工作，我做错了什么？
【发布时间】：2022-01-26 15:30:21
【问题描述】：

这个问题最初是在 vuejs 论坛上提出的，但没有得到答案（我知道现在是假期:)

我在 vue3 中使用网格来疯狂。几周前它曾经可以工作，但是在软件包版本发生一些更改之后，我无法再让它工作（虽然不确定它是否已链接）。我创建了一个小型复制器：

Package.json 包含：

 {
      "name": "test",
      "version": "0.1.0",
      "private": true,
      "scripts": {
        "serve": "vue-cli-service serve"
      },
      "dependencies": {
        "vue": "3.2.26",
        "vue-class-component": "8.0.0-rc.1",
        "vue-router": "4.0.12",
        "primeflex": "^3.1.0",
        "primeicons": "^5.0.0",
        "primevue": "^3.9.1"
      },
      "devDependencies": {
        "@types/node": "17.0.0",
        "@vue/cli-plugin-babel": "4.5.15",
        "@vue/cli-plugin-router": "4.5.15",
        "@vue/cli-plugin-typescript": "4.5.15",
        "@vue/cli-service": "4.5.15",
        "typescript": "4.5.4"
      },
      "browserslist": [
        "> 1%",
        "last 2 versions",
        "not dead"
      ]
    }

src/main.ts 包含：

import { createApp } from "vue";
import MyApp from "./App.vue";
import PrimeVue from "primevue/config";
import "primevue/resources/themes/saga-blue/theme.css";
import "primevue/resources/primevue.min.css";
import "primeicons/primeicons.css";
import "primeflex/primeflex.min.css";

createApp(MyApp)
  .use(PrimeVue)
  .mount("#app");

和 src/App.vue 基本上包含一个名为“Vertical Layout with Grid”的示例的副本，该示例使用带有 vue-class-component 的 vuue 3 语法：

<template>
  <h2>test</h2>
  <div class="p-fluid p-formgrid p-grid">
    <div class="p-field p-col">
      <label for="firstname">Firstname</label>
      <InputText id="firstname" type="text" />
    </div>
    <div class="p-field p-col">
      <label for="lastname">Lastname</label>
      <InputText id="lastname" type="text" />
    </div>
  </div>
</template>
<script lang="ts">
import { Options, Vue } from "vue-class-component";
import InputText from "primevue/inputtext";

@Options({
  components: {
    InputText,
  },
})
export default class MyApp extends Vue {}
</script>

这应该显示如下内容：但它实际上显示（使用 Firefox）：而且我完全无法同时获得这两个领域…… 有人可以指出我正确的方向吗？谢谢！ [1]：https://i.stack.imgur.com/44P2h.png [2]：https://i.stack.imgur.com/75nZk.png

【问题讨论】：

尝试使用Firefox Inspector 来检查<div class="p-fluid p-formgrid p-grid"> 上应用的CSS 属性是什么，可能某些CSS 文件没有正确加载

标签： vue.js css-grid vuejs3

【解决方案1】：

@BenSouchet 感谢您的评论，您将我推向了正确的轨道。

确切地说，我最初只查看了我能够在 CSS 中找到的 p-fluid，但在您的评论之后，我仔细查看后发现我无法在其中找到 p-formgrid、p-grid 或 p-field该页面也不在 node_modules 目录中。

运行grep -R 'p-grid' node_modules/prime* 不会返回任何内容...

所以，我看了两遍https://www.primefaces.org/primeflex/migration，发现在 primeflex 3 中，所有名为 p-xxx 的类现在都被命名为 xxx（例如 p-formgrid 变为 formgrid），所以我更改了上面模板中的类，它现在可以工作了又好了...

现在，下一个问题是为什么会有如此重大的变化？？？我需要通过我的整个应用程序来解决这个问题：/

【讨论】：