Vuejs2 如何使用quasar framework创建顶部菜单栏

我正在尝试Quasar框架，在演示或当前的在线网站（in:）中没有任何内容显示如何在框架中使用顶部菜单栏，我认为这在大多数web框架中是标准的。请提供帮助。

因为quasar是构建应用程序的PWA框架，所以它不支持。不过，你可以稍微调整一下，把按钮放在上面

<q-toolbar-title>
<q-btn></q-btn>
</q-toolbar-title>

---

您还可以在按钮内添加popover以制作下拉按钮。

我在我的一个项目中做了类似的操作。它将在大屏幕上在线显示菜单项，并作为小屏幕的弹出窗口显示。您可以根据需要修改布局

<template> 
   <q-layout>
     <q-layout-header >
      <q-toolbar>
        <q-btn
          flat
          dense
          round
          aria-label="Menu"
          @click="leftDrawerOpen = !leftDrawerOpen" >
          <q-icon name="menu" />
        </q-btn>
        <img
          class="ml-2"
          height="30"
          alt="Company logo"
          src="~assets/logo.png"
        >
        <q-btn
          :color="showActions?'secondary':''"
          :icon="showActions?'keyboard_arrow_up':'keyboard_arrow_down'"
          flat
          class="lt-sm ml-auto"
          @click.native="showActions = !showActions"
        />


        <div class="action-buttons ml-auto gt-xs" >
          <q-btn
            v-for="item in toolbarButtons"
            :key="item.label"
            :icon="item.icon"
            :label="item.label"
            flat
            @click="item.action()"
          />
        </div>
      </q-toolbar>
      <div class="row justify-end">
        <div class="col-7" >
          <q-popover
            :anchor-click="true"
            v-model="showActions"
            fit
            anchor="bottom left"
            class="lt-sm"
          >
            <q-list
              separator
              link>
              <q-item
                v-close-overlay
                v-for="item in toolbarButtons"
                :key="item.label"
                @click.native="item.action()"
              >
                <q-item-side >
                  <q-icon :name="item.icon"/>
                </q-item-side>
                {{ item.label }}
              </q-item>
            </q-list>
          </q-popover>
        </div>
      </div>
     </q-layout-header>
   </q-layout>
  </template>


<script>
export default {
  name: 'LayoutName',
  data() {
    return {
      leftDrawerOpen: false,
      showActions: false,
      toolbarButtons: [
        {
          label: 'Share',
          icon: 'fa fa-share',
          action: () => {
            this.$router.push('/import');
          },
        },
        {
          label: 'Save',
          icon: 'fa fa-save',
          action: () => {
          },
        },
        ...
      ],
    };
  },
};
</script>

{{item.label}
导出默认值{
名称：“LayoutName”，
数据（）{
返回{
LeftDrawerRopen:错，
表演：假，
工具栏按钮：[
{
标签：“共享”，
图标：“fa fa share”，
行动：（）=>{
这个.$router.push（'/import'）；
},
},
{
标签：“保存”，
图标：“fa-fa-save”，
行动：（）=>{
},
},
...
],
};
},
};

将尝试一下。您目前是否在生产中使用此功能？是。我在使用cordova和electron的生产混合应用程序中使用它