1.布局（Layout）

基本用法：

<!-- 主包装组件 -->
<q-layout>
      <!-- optional -->
      <q-layout-header>
        <!-- content; any -->
      </q-layout-header>

      <!-- optional -->
      <q-layout-drawer side="left">
        <!-- content; any -->
      </q-layout-drawer>

      <!-- optional -->
      <q-layout-drawer side="right">
    <!-- content; any -->
  </q-layout-drawer>

  <!-- REQUIRED -->
  <q-page-container>

<!--
  Here it's where Vue Router injects children
  Page components.

  <router-view/> tag below can be replaced by an
  actual page content should you wish to do so.
-->
<router-view />
<!--
  First child of QPageContainer must be a QPage,
  so make sure that your layout route children components
  encapsulate a QPage.
-->

  </q-page-container>

  <!-- optional -->
  <q-layout-footer>
    <!-- content; any -->
  </q-layout-footer>
</q-layout>

2.按钮（button）

基本用法：

<!-- 仅标签 -->
<q-btn label="New item" />

<!-- 仅图片 -->
<q-btn icon="map" />

<!-- 图片 & 标签 -->
<q-btn icon="create" label="New item" />

标准圆形按钮

<q-btn round color="secondary" icon="card_giftcard" />
或：
<q-btn round color="secondary">
      <q-icon name="card_giftcard" />
</q-btn>

button Sizes:

<q-btn color="primary" size="xs" label="Extra Small Button" />
size(xs,sm,md,lg,xl) md:默认

按钮颜色（primary，amber-8,orange,lime）

按钮样式类型（outline，push,round,flat,rounded和glossy）

按钮组（button group）

基本用法：

<q-btn-group>
  <q-btn label="One" @click="clickHandler1"/>
  <q-btn label="Two" @click="clickHandler2"/>
  <q-btn label="Three" @click="clickHandler3"/>
</q-btn-group>

下拉按钮

<q-btn-dropdown label="Button">
  <!-- dropdown content -->
      <q-list link>
        <q-item>
          <q-item-main>
            <q-item-tile label>Item</q-item-tile>
          </q-item-main>
        </q-item>
      </q-list>
</q-btn-dropdown>