Vue Режим Quasar nin UMD плохо отображается - PullRequest
Новая
       50

Vue Режим Quasar nin UMD плохо отображается

0 голосов
/ 17 июня 2020
• 1000 *UMD on top cli below

я добавляю свой код 

<!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>

1 Ответ

1 голос
/ 18 июня 2020

Только одна проблема

НЕ используйте самозакрывающиеся теги, например <q-icon ... />. Вместо этого go с <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>
...