Quasar UMD - CDN 安裝

如果您想將 Quasar 嵌入到現有的網站專案中，並以漸進方式整合，請選用 UMD/獨立 (Unified Module Definition) 版本。

安裝

UMD 的重點在於新增 Quasar 樣式和 javascript 標籤。請選擇您將使用的項目，並查看下方的輸出。

Roboto 字體

Animate.css

Quasar Config 物件

最小化檔案

RTL CSS 支援

英文 (美國)

Quasar 語言包

Material (webfont)

Quasar 圖示集

<!DOCTYPE html>
<html>
  <!--
    WARNING! Make sure that you match all Quasar related
    tags to the same version! (Below it's "@2.17.0")
  -->

  <head>
    <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@2.17.0/dist/quasar.prod.css" rel="stylesheet" type="text/css">
  </head>

  <body>
    <!-- example of injection point where you write your app template -->
    <div id="q-app"></div>

    <!-- Add the following at the end of your body tag -->
    <script src="https://cdn.jsdelivr.net/npm/vue@3/dist/vue.global.prod.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/quasar@2.17.0/dist/quasar.umd.prod.js"></script>
    
    <script>
      /*
        Example kicking off the UI. Obviously, adapt this to your specific needs.
        Assumes you have a <div id="q-app"></div> in your <body> above
       */
      const app = Vue.createApp({
        setup () {
          return {}
        }
      })

      app.use(Quasar)
      app.mount('#q-app')
    </script>
  </body>
</html>

警告

請注意文件開頭的 <!DOCTYPE html>。請務必新增它，否則部分瀏覽器 (尤其是 Safari) 將使用會破壞 flex 的相容模式。
如果您正在使用 RTL Quasar 語言包 (例如希伯來文)，也請切換上方的「RTL CSS 支援」！
請勿使用自我關閉標籤，例如 <q-icon ... />。請改用 <q-icon ...></q-icon>。
將您使用的所有套件釘選到您已在開發中測試過的特定版本可能是明智之舉。可能會發生回歸，例如 Vue 3.2.32，這可能會破壞您的頁面。將 Vue 釘選到特定版本的範例 (將 script 標籤指向)：https://cdn.jsdelivr.net/npm/vue@3.2.31/dist/vue.global.prod.js

提示

所有元件、指令和 Quasar 外掛程式都已準備好開箱即用。無需額外程式碼即可安裝它們。只需確保您不會使用自我關閉標籤。

JsFiddle / Codepen

您也可以 Fork 並使用這些連結，在 GitHub 上回報問題

供應商	網址
jsFiddle	https://jsfiddle.quasar.dev
Codepen	https://codepen.quasar.dev

這些連結 (顯然) 使用 Quasar UMD 版本。

Quasar Global 物件

當您將 Quasar UMD 嵌入到網頁中時，您將獲得注入的 Quasar global 物件

Quasar = {
  version, // Quasar version

  ...components,
  ...directives,
  ...plugins, // Quasar plugins
  ...utils, // Quasar utils

  // if you want to change current icon set or Quasar Language pack
  // (must include CDN links so they are available first!)
  lang,
  iconSet
}

一些使用範例

Quasar.QBtn
Quasar.getCssVar('primary')
Quasar.debounce(fn, 200)
Quasar.Notify.create('Hi and welcome!')
Quasar.utils.is.deepEqual(objA, objB)

Quasar Config 物件

Quasar 和 Quasar 外掛程式有一些設定選項

app.use(Quasar, {
  config: {
    brand: {
      primary: '#e46262',
      // ... or all other brand colors
    },
    notify: {...}, // default set of options for Notify Quasar plugin
    loading: {...}, // default set of options for Loading Quasar plugin
    loadingBar: { ... }, // settings for LoadingBar Quasar plugin
    // ..and many more
  }
})

用法

因此，在您找出需要嵌入到網頁中的 CDN 連結後，現在是時候使用 Quasar 了。

透過使用 UMD 版本，您將擁有已為您安裝的所有元件、指令和 Quasar 外掛程式。您只需要開始使用它們即可。

請勿對 UMD 版本使用自我關閉標籤： 您會注意到您將無法使用任何元件的自我關閉標籤形式。您必須關閉所有元件標籤。

<!-- Incorrect usage: In docs, but for Quasar CLI usage -->
<q-btn label="My Button" />
<!-- ^^^ can't use it like this on UMD -->

<!-- Correct usage: Instead, include a self-closing tag too: -->
<q-btn label="My Button"></q-btn>

範例

<!-- components -->
<q-btn label="My Button"></q-btn>

<!-- directives -->
<div v-ripple>...</div>

// Quasar plugins
Quasar.BottomSheet.create({...})

// Quasar utils
Quasar.openURL('https://quasar.dev.org.tw')

變更 Quasar 圖示集

假設您已包含您最愛的 Quasar 圖示集的 CDN 連結 (除非您使用預設使用的 Material Icons)，那麼您可以告知 Quasar 使用它

Quasar.IconSet.set(Quasar.IconSet.fontawesomeV6)

可用的 Quasar 圖示集列表可以在 GitHub 上找到。

變更 Quasar 語言包

假設您已包含您想要的 Quasar I18n 語言的 CDN 連結 (除非您想要使用預設使用的「en-US」語言包)，那麼您可以告知 Quasar 使用它

// example setting German language,
// using ISO 2 letter code:
Quasar.Lang.set(Quasar.Lang.de)

// example setting Portuguese (Brazil) language:
Quasar.Lang.set(Quasar.Lang.ptBR)

可用的語言列表可以在 GitHub 上找到。如果您想要的語言包尚不可用，您可以透過提供 PR 來協助。 我們歡迎任何語言！

發現錯誤？在瀏覽器中編輯此頁面

1. 簡介

2. 安裝

3. JsFiddle / Codepen

4. Quasar Global 物件

5. Quasar Config 物件

6. 用法

6.1. 範例

6.2. 變更 Quasar 圖示集

6.3. 變更 Quasar 語言包