UIkit网格在Vue里不生效是怎么回事？

子儒提问于 2026-03-29 14:17:16 阅读 5

组件

我在Vue项目里引入了UIkit，想用它的Grid布局，但写完发现列没按预期排列，全都堆在一起了。是不是哪里漏了？

我已经在main.js里import ‘uikit/dist/css/uikit.min.css’了，也确认类名拼写没错。下面是我的组件代码：

<template>
  <div class="uk-container">
    <div class="uk-grid-match uk-child-width-1-3@m" uk-grid>
      <div>Item 1</div>
      <div>Item 2</div>
      <div>Item 3</div>
    </div>
  </div>
</template>

页面渲染出来三个div是垂直堆叠的，完全没有网格效果，控制台也没报错，有点懵。

Grid网格

我来解答赞 3 收藏

反馈

1 条解答

奕洳酱~ Lv1

看起来你漏了一个关键的初始化步骤。UIkit的网格系统在Vue中需要额外处理一下DOM更新的问题。

你需要给 uk-grid 加一个 v-if 或者使用 this.$uikit.grid 手动初始化。

最简单的方案是在外层容器上加上 v-if 来确保DOM渲染完成后再应用UIkit的grid：



<template>

  <div class="uk-container">

    <div v-if="isMounted" class="uk-grid-match uk-child-width-1-3@m" uk-grid>

      <div>Item 1</div>

      <div>Item 2</div>

      <div>Item 3</div>

    </div>

  </div>

</template>



<script>

export default {

  data() {

    return {

      isMounted: false

    }

  },

  mounted() {

    this.isMounted = true

  }

}

<//script>

这样更清晰，等组件挂载完成再显示内容。另外记得检查你的UIkit版本，有些老版本可能需要手动调用 UIkit.grid(element) 来初始化，不过新版一般不用这么麻烦了。试试看，应该就能看到网格效果了。

2026-03-29 15:07