Quasar UMD - CDN 安装

如果您想将Quasar嵌入到您现有的网站项目中,并以渐进的方式进行整合,那么请选择UMD / Standalone(统一模块定义)版本。

安装

UMD就是添加Quasar样式和javascript标签。 请选择您要使用的内容,然后查看其下方的输出。

Roboto font
Animate.css

Material Icons
Material Icons (Outlined)
Material Icons (Round)
Material Icons (Sharp)
Material Symbols (Outlined)
Material Symbols (Rounded)
Material Symbols (Sharp)
MDI v6
Fontawesome v6
Fontawesome v5
Ionicons v4
Eva Icons
Themify
Line Awesome
Bootstrap Icons

Quasar Config Object
Minified files
RTL CSS support


<!DOCTYPE html>
<html>
  <!--
    WARNING! Make sure that you match all Quasar related
    tags to the same version! (Below it's "@2.10.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.10.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.10.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>

WARNING

  • 请注意文档开头的<!DOCTYPE html>。 不要忘记添加它,否则某些浏览器(尤其是Safari)将使用某些破坏flex的兼容模式。
  • 如果您使用的是RTL Quasar语言包(例如希伯来语),那么也可以切换上方的“ RTL CSS支持”!
  • 请勿使用自闭标签,例如<q-icon ... />。 而是使用<q-icon ...></q-icon>
  • 最好将您使用的所有包钉到您已经在开发中测试过的特定版本。回归可能会发生,如Vue 3.2.32,这可能会破坏您的页面。将Vue固定到特定版本的示例(将脚本标记指向):https://cdn.jsdelivr.net/npm/vue@3.2.31/dist/vue.global.prod.js

TIP

所有组件、指令和Quasar插件都可以直接使用。 无需其他代码即可安装它们。 只要确保您将不使用自关闭标签即可。

JsFiddle / Codepen

您也可以在Github上fork和使用这些链接来报告问题:

这些链接(显然)使用Quasar UMD版本。

Quasar全局对象

当您将Quasar UMD嵌入网页时,您会注入一个Quasar全局对象:

Quasar = {
  version, // Quasar version

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

  //如果要更改当前图标集或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了。

TIP

您会注意到,所有的Quasar组件、Quasar指令和Quasar插件都在其页面顶部有一个安装部分。

通过使用UMD版本,您可以获得已经安装的所有组件、指令和Quasar插件。 你只需要开始使用它们。

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

<!-- 不正确的用法:在文档中, 仅用于Quasar CLI -->
<q-btn label="My Button" />
<!-- ^^^ UMD方式不能使用 -->

<!-- 正确的用法:作为替代, 使用以下形式: -->
<q-btn label="My Button"></q-btn>

Quasar组件

一个例子。 无需在UMD版本中安装任何组件。

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

Quasar指令

一个例子。 无需在UMD版本中安装任何指令。

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

Quasar插件

一个例子。 无需在UMD版本中安装任何插件。

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

Quasar实用工具

一个例子。

Quasar.openURL('https://quasar.dev')

改变Quasar图标集

假设您已经为您喜欢的Quasar图标集添加了CDN链接(除非您使用默认使用的Material图标),那么您可以告诉Quasar使用它:

Quasar.iconSet.set(Quasar.iconSet.fontawesomeV6)

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

改变Quasar语言包

假设您已经为您想要的Quasar I18n语言添加了CDN链接(除非您需要默认使用的“en-US”语言包),那么您可以告诉Quasar使用它:

// 例如设置德语,
// 使用ISO 2字母码:
Quasar.lang.set(Quasar.lang.de)

// 例如设置Portuguese (巴西) 语言:
Quasar.lang.set(Quasar.lang.ptBR)

可用语言列表可以在GitHub上找到。 如果您所需的语言包尚不可用,您可以通过提供PR来提供帮助。 我们欢迎任何语言!