Quasar UMD - CDN 安装

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

安装

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

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

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

  <body>
    <!-- Add the following at the end of your body tag -->
    
    <script src="https://cdn.jsdelivr.net/npm/vue@^2.0.0/dist/vue.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/quasar@1.12.8/dist/quasar.umd.min.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
       */
      new Vue({
        el: '#q-app',
        data: function () {
          return {}
        },
        methods: {},
        // ...etc
      })
    </script>
  </body>
</html>

WARNING

  • 请注意文档开头的<!DOCTYPE html>。 不要忘记添加它,否则某些浏览器(尤其是Safari)将使用某些破坏flex的兼容模式。
  • 如果您使用的是RTL Quasar语言包(例如希伯来语),那么也可以切换上方的“ RTL CSS支持”!
  • 请勿使用自闭标签,例如<q-icon ... />。 而是使用<q-icon ...></q-icon>

TIP

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

可选的

另一种根据您的要求获得必要标签的快捷方法是使用UMD演示套件。 它将询问您一些问题并生成一个简单的HTML文件,该文件将向您展示如何使用CDN添加Quasar:

$ quasar create <folder_name> --kit umd

你已经完成了。 检查在新文件夹中创建的index.html文件,并了解如何嵌入Quasar。 注意<style><script>标签及其顺序。

请注意,与主入门工具包相反,您无需导入任何内容。 所有组件,指令和Quasar插件都可以直接使用。

但是,缺点是您不会受益于Quasar CLI提供的一流开发经验 - 这使您可以同时开发和构建SPA、PWA、SSR、移动和Electron应用。

JsFiddle / Codepen

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

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

Quasar全局对象

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

Quasar = {
  version, // Quasar version

  plugins, // Quasar plugins
  utils, // Quasar utils

  // 如果你想扩展Quasar的组件或指令
  components,
  directives,

  //如果要更改当前图标集或Quasar语言包
  //(必须包含CDN链接,以便它们首先可用!)
  lang,
  iconSet
}

初始配置

Quasar和Quasar插件有一些配置选项。 对于Quasar UMD版本,您可以在包含Quasar脚本标记之前定义以下内容:

<script>
  // 可选的
  window.quasarConfig = {
    brand: { // 这不适用于IE 11
      primary: '#e46262',
      // ... 或者所有其它品牌颜色
    },
    notify: {...}, // Notify Quasar插件的默认选项集
    loading: {...}, // Loading Quasar插件的默认选项集
    loadingBar: { ... }, // LoadingBar Quasar插件的设置
    // ..还有很多
  }
</script>

用法

因此,在找出需要嵌入到网页中的CDN链接后(希望您已经检查了由UMD入门套件创建的项目文件夹)后,现在是时候使用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.plugins.bottomSheet.create({...})

Quasar实用工具

一个例子。

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

改变Quasar图标集

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

Quasar.iconSet.set(Quasar.iconSet.fontawesomeV5)

可以在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来提供帮助。 我们欢迎任何语言!