Vue Quasar nin UMD 模式渲染不佳答案

【问题标题】：Vue Quasar nin UMD mode renders badlyVue Quasar nin UMD 模式渲染不佳
【发布时间】：2020-10-06 17:35:24
【问题描述】：

我正在做一个简单的演示，试图渲染一些 Quasar 组件使用 quasar cli 执行此操作非常完美，但当我在独立模式下执行此操作时，某些组件的渲染效果很差，如图所示

我正在添加我的代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Quasar :: Network statistics</title>

    <link
      href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons"
      rel="stylesheet"
      type="text/css"
    />
    <link
      href="https://cdn.jsdelivr.net/npm/quasar@1.12.5/dist/quasar.css"
      rel="stylesheet"
      type="text/css"
    />
  </head>
  <body>
    <script src="https://cdn.jsdelivr.net/npm/vue@^2.0.0/dist/vue.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/quasar@1.12.5/dist/quasar.umd.js"></script>

    <div id="main-vue" v-cloak>
      <layout></layout>
    </div>

    <script>
      Vue.component("layout", { template: "#layout" });
    </script>
    <template id="layout">
      <q-layout view="lHh Lpr lFf">
        <q-header elevated>
          <q-toolbar>
            <q-toolbar-title>
              Quasar App
            </q-toolbar-title>

            <q-btn-group push>
              <q-btn
                color="yellow"
                glossy
                text-color="black"
                push
                label="First"
                icon="verified_user"
              />
              <q-btn
                color="amber"
                glossy
                text-color="black"
                push
                label="Second"
              />
              <q-btn
                color="orange"
                glossy
                text-color="black"
                push
                label="Third"
              />
            </q-btn-group>
          </q-toolbar>
        </q-header>

        <q-page-container>
          <slot></slot>
        </q-page-container>
      </q-layout>
    </template>

    <script>
      new Vue({
        el: "#main-vue",
      });
    </script>
  </body>
</html>

【问题讨论】：

标签： vue.js quasar-framework

【解决方案1】：

只有一个问题

不要使用自闭标签，例如<q-icon ... />。相反，请使用<q-icon ...></q-icon>。

试试这个。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Quasar :: Network statistics</title>

    <link
      href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons"
      rel="stylesheet"
      type="text/css"
    />
    <link
      href="https://cdn.jsdelivr.net/npm/quasar@1.12.5/dist/quasar.css"
      rel="stylesheet"
      type="text/css"
    />
  </head>
  <body>
    <script src="https://cdn.jsdelivr.net/npm/vue@^2.0.0/dist/vue.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/quasar@1.12.5/dist/quasar.umd.js"></script>

    <div id="main-vue" v-cloak>
      <layout></layout>
    </div>

    <script>
      Vue.component("layout", { template: "#layout" });
    </script>
    <template id="layout">
      <q-layout view="lHh Lpr lFf">
        <q-header elevated>
          <q-toolbar>
            <q-toolbar-title>
              Quasar App
            </q-toolbar-title>

            <q-btn-group push>
              <q-btn
                color="yellow"
                glossy
                text-color="black"
                push
                label="First"
                icon="verified_user"
              ></q-btn>
              <q-btn
                color="amber"
                glossy
                text-color="black"
                push
                label="Second"
              ></q-btn>
              <q-btn
                color="orange"
                glossy
                text-color="black"
                push
                label="Third"
              ></q-btn>


            </q-btn-group>
          </q-toolbar>
        </q-header>

        <q-page-container>
          <slot></slot>
        </q-page-container>
      </q-layout>
    </template>

    <script>
      new Vue({
        el: "#main-vue",
      });
    </script>
  </body>
</html>

【讨论】：