Quasar UMD - CDN 安装

如果你想将 Quasar 嵌入到你现有的网站项目中，并以渐进的方式集成它，那么请选择 UMD/Standalone（统一模块定义）版本。

¥If you want to embed Quasar into your existing website project, integrating it in a progressive manner, then go for the UMD/Standalone (Unified Module Definition) version.

安装(Installation)

¥Installation

UMD 主要用于添加 Quasar 样式和 JavaScript 标签。请选择你将使用的扩展并查看其下方的输出。

¥UMD is all about adding Quasar style and javascript tags. Please select what you will be using and check out the output below it.

Roboto font

Animate.css

Quasar Config Object

Minified files

RTL CSS support

English (US)

Quasar Language Pack

Material (webfont)

Quasar Icon Set

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

  <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.18.1/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.18.1/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 功能。
¥Please notice the <!DOCTYPE html> at the beginning of the document. Do not forget to add it, or else some browsers (notably Safari) will use some compatibility mode that breaks flex.
如果你使用的是 RTL Quasar 语言包（例如希伯来语），也请切换上面的 “RTL CSS 支持”！
¥If you are using an RTL Quasar language pack (eg. Hebrew) then toggle the “RTL CSS support” above too!
请勿使用自闭合标签，例如 <q-icon ... />。请使用 <q-icon ...></q-icon>。
¥Do NOT use self-closing tags, like <q-icon ... />. Instead, go with <q-icon ...></q-icon>.
将你使用的所有软件包固定到已在开发中测试过的特定版本，或许是个明智之举。可能会出现回退，例如在 Vue 3.2.32 中，这可能会导致你的页面崩溃。将 Vue 固定到特定版本的示例（将脚本标签指向）：https://cdn.jsdelivr.net/npm/vue@3.2.31/dist/vue.global.prod.js
¥It might be wise to pin all the packages that you use to specific versions that you’ve already tested in development. Regressions can occur, like in Vue 3.2.32 and this can break your pages. Example of pinning Vue to a specific version (point the script tag to): https://cdn.jsdelivr.net/npm/vue@3.2.31/dist/vue.global.prod.js

提示

所有组件、指令和 Quasar 插件均可开箱即用。安装它们无需额外的代码。请确保你没有使用自闭合标签。

¥All components, directives and Quasar plugins are ready to be used out of the box. There is no need for additional code to install them. Just make sure that you will NOT be using self-closing tags.

JsFiddle / Codepen(JsFiddle / Codepen)

你也可以 fork 并使用这些链接在 GitHub 上报告问题：

¥You can fork and use these links for reporting issues on GitHub too:

供应商	URL
jsFiddle	https://jsfiddle.quasar.dev
Codepen	https://codepen.quasar.dev

这些链接（显然）使用的是 Quasar UMD 版本。

¥These links (obviously) use the Quasar UMD version.

Quasar 全局对象(Quasar Global Object)

¥Quasar Global Object

当你将 Quasar UMD 嵌入到网页中时，你将获得一个 Quasar 全局对象注入：

¥When you embed Quasar UMD into a webpage you’ll get a Quasar global Object injected:

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
}

一些使用示例：

¥Some usage examples:

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

Quasar 配置对象(Quasar Config Object)

¥Quasar Config Object

Quasar 和 Quasar 插件有一些配置选项：

¥There are some configuration options for Quasar & Quasar plugins:

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
  }
})

用法(Usage)

¥Usage

在你弄清楚需要嵌入到网页中的 CDN 链接后，现在是时候使用 Quasar 了。

¥So, after you figured out the CDN links that you need to embed into your webpages, now it’s time to use Quasar.

通过使用 UMD 版本，你将拥有已安装的所有组件、指令和 Quasar 插件。你只需要开始使用它们。

¥By using the UMD version, you’ll have all of the components, directives and Quasar plugins already installed for you. You just need to start using them.

不要在 UMD 版本中使用自闭合标签：你会注意到，你将无法使用任何组件的自闭合标签形式。你必须关闭所有组件标签。

¥Do not use self-closing tags with the UMD version: You will notice that you won’t be able to use the self-closing tag form of any of the components. You must close all components tags.

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

示例(Examples)

¥Examples

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

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

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

// Quasar utils
Quasar.openURL('https://quasar.nodejs.cn')

更改 Quasar 图标集(Changing Quasar Icon Set)

¥Changing Quasar Icon Set

假设你已经包含了你最喜欢的 Quasar 图标集的 CDN 链接（除非你使用的是默认使用的 Material Icons），你可以告诉 Quasar 使用它：

¥Assuming you have already included the CDN link to your favorite Quasar Icon Set (unless you’re using Material Icons which is used by default), you can then tell Quasar to use it:

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

可用的 Quasar 图标集列表可以在 GitHub 上找到。

¥The list of available Quasar Icon Sets can be found on GitHub.

更改 Quasar 语言包(Changing Quasar Language Pack)

¥Changing Quasar Language Pack

假设你已经包含了所需的 Quasar 国际化语言的 CDN 链接（除非你想要默认使用的 “en-US” 语言包），你可以告诉 Quasar 使用它：

¥Assuming you have already included the CDN link to your desired Quasar I18n Language (unless you want “en-US” language pack which is used by default), you can then tell Quasar to use it:

// 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 来提供帮助。我们欢迎任何语言！

¥The list of available languages can be found on GitHub. If your desired language pack is not available yet, you can help by providing a PR. We welcome any languages!

1. Introduction

2. 安装(Installation)

3. JsFiddle / Codepen(JsFiddle / Codepen)

4. Quasar 全局对象(Quasar Global Object)

5. Quasar 配置对象(Quasar Config Object)

6. 用法(Usage)

6.1. 示例(Examples)

6.2. 更改 Quasar 图标集(Changing Quasar Icon Set)

6.3. 更改 Quasar 语言包(Changing Quasar Language Pack)