Quasar UMD - CDN 安装

如果您想将 Quasar 集成到现有的网站项目中，以渐进式的方式使用它，那么 UMD/Standalone（通用模块定义）版本正是您需要的。

安装

UMD 版本通过添加 Quasar 的样式和 JavaScript 标签来实现。请使用下面的工具选择需要的功能，然后查看生成的输出。

Roboto font

Animate.css

Quasar Config Object

Minified files

RTL CSS support

Quasar Language Pack

English (US)

Quasar Icon Set

Material (webfont)

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

  <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.19.3/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.19.3/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>

WARNING

请注意文档开头的 <!DOCTYPE html>。不要忘记添加它，否则某些浏览器（特别是 Safari）会使用兼容模式，从而导致 flex 布局出现问题。
如果您使用的是 RTL（从右到左）的 Quasar 语言包（例如希伯来语），请同时勾选上方的 “RTL CSS support” 选项！
不要使用自闭合标签，例如 <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

TIP

所有的组件、指令和 Quasar 插件都已经开箱即用，无需额外的代码来安装它们。只需确保不要使用自闭合标签。

JsFiddle / Codepen

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

平台	链接
jsFiddle	https://jsfiddle.quasar.dev
Codepen	https://codepen.quasar.dev

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

Quasar 全局对象

当您在网页中引入 Quasar UMD 时，会得到一个全局注入的 Quasar 对象：

Quasar = {
  version, // Quasar 版本号

  ...components,
  ...directives,
  ...plugins, // Quasar 插件
  ...utils, // Quasar 工具函数

  // 如果您想更改当前的图标集或 Quasar 语言包
  // （必须先引入对应的 CDN 链接！）
  lang,
  iconSet,
};

一些使用示例：

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

Quasar 配置对象

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

app.use(Quasar, {
  config: {
    brand: {
      primary: '#e46262',
      // ... 或其他所有品牌颜色
    },
    notify: {...}, // Notify Quasar 插件的默认选项
    loading: {...}, // Loading Quasar 插件的默认选项
    loadingBar: { ... }, // LoadingBar Quasar 插件的设置
    // ... 还有更多
  }
})

使用方法

在确定了需要嵌入网页的 CDN 链接后，就可以开始使用 Quasar 了。

使用 UMD 版本时，所有组件、指令和 Quasar 插件都已自动安装好，您只需直接使用即可。

UMD 版本中不要使用自闭合标签： 您会发现无法使用任何组件的自闭合标签形式，必须使用完整的闭合标签。

<!-- 错误用法：文档中的写法，但仅适用于 Quasar CLI -->
<q-btn label="My Button" />
<!-- ^^^ 在 UMD 中不能这样使用 -->

<!-- 正确用法：使用完整的闭合标签 -->
<q-btn label="My Button"></q-btn>

示例

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

<!-- 指令 -->
<div v-ripple>...</div>

// Quasar 插件
Quasar.BottomSheet.create({...})

// Quasar 工具函数
Quasar.openURL('https://quasar.dev')

更换 Quasar 图标集

假设您已经引入了所需的 Quasar 图标集的 CDN 链接（除非您使用的是默认的 Material Icons），可以通过以下方式告诉 Quasar 使用它：

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

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

更换 Quasar 语言包

假设您已经引入了所需的 Quasar 国际化语言包的 CDN 链接（除非您使用的是默认的 “en-US” 语言包），可以通过以下方式告诉 Quasar 使用它：

// 设置德语的示例，
// 使用 ISO 2 字母代码：
Quasar.Lang.set(Quasar.Lang.de);

// 设置葡萄牙语（巴西）的示例：
Quasar.Lang.set(Quasar.Lang.ptBR);

可用的语言列表可以在 GitHub 上找到。如果您需要的语言包尚不可用，欢迎提交 PR 来帮助我们完善！ 我们欢迎任何语言的贡献！

发现错误？在浏览器中编辑此页

1. Introduction

2. 安装

3. JsFiddle / Codepen

4. Quasar 全局对象

5. Quasar 配置对象

6. 使用方法

6.1. 示例

6.2. 更换 Quasar 图标集

6.3. 更换 Quasar 语言包