Gridsome(五)：UI框架 Buefy 的使用

最新推荐文章于 2026-06-02 07:41:42 发布

原创最新推荐文章于 2026-06-02 07:41:42 发布 · 2k 阅读

2 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

阿哈哈哈大前端

学习笔记📒

本文介绍了如何在Gridsome中使用Buefy UI框架，包括安装、配置和实际应用步骤。推荐使用Netlify进行部署，因其支持Push to Deploy、免费HTTPS和自定义域名等优势。

官方文档：https://buefy.org/documentation/customization/

1. 安装

cnpm install buefy

2. 配置

// 在 main.js 中添加：
import Buefy from 'buefy'
import 'buefy/dist/buefy.css'

Vue.use(Buefy)

3. 使用

🌰：顶部导航栏

<template>
  <b-navbar>
    <template slot="brand">
      <b-navbar-item tag="router-link" :to="{ path: '/' }">
        <img src="../assets/images/belstar-logo.png">
      </b-navbar-item>
    </template>
    <template slot="start">
      <b-navbar-item href="/">
        Home
      </b-navbar-item>
      <b-navbar-item href="https://gridsome.org/">
        Documentation
      </b-navbar-item>
      <b-navbar-dropdown label="Blog">
        <b-navbar-item :href="edge.node.path" v-for="edge in $page.posts.edges" :key="edge.node.id">
          {{edge.node.title}}
        </b-navbar-item>
      </b-navbar-dropdown>
    </template>
  </b-navbar>
</template>

<page-query>
query {
  posts: allPost(filter: { published: { eq: true }}) {
    edges {
      node {
        id
        title
        description
        cover_image (width: 770, height: 380, blur: 10)
        path
        tags {
          id
          title
          path
        }
      }
    }
  }
}
</page-query>