UMD入门套件 - CDN安装

如果您想将Quasar嵌入到您现有的网站项目中，并以渐进的方式进行整合，那么请选择UMD / Standalone（统一模块定义）版本。 UMD入门套件会问你一些问题后生成一个简单的HTML文件，告诉你如何使用CDN的方式添加Quasar：

$ vue init quasarframework/quasar-starter-kit-umd <文件夹名称>

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

请注意，与主入门套件相反，您不需要导入任何东西。 所有组件，指令和Quasar插件都可以立即使用。

然而，缺点是您不会从Quasar CLI提供的顶尖开发体验中受益 - 这使您可以同时开发和构建SPA，PWA，移动和电子应用程序。

JsFiddle / Codepen

您也可以在Github上分发和使用这些链接来报告问题：

Material 主题 iOS 主题
jsFiddle https://jsfiddle.net/rstoenescu/waugrryy/ https://jsfiddle.net/rstoenescu/7gu065yg/
Codepen https://codepen.io/rstoenescu/pen/KQRZJg https://codepen.io/rstoenescu/pen/paVpBN

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

Quasar全局对象

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

Quasar = {
  version,
  theme: 'mat', // or 'ios', based on the theme you are using from CDN
                // -- must match both .js and .css CDN links to point to same theme
  plugins,
  utils,

  // if you want to extend Quasar's components or directives
  components,
  directives,

  // if you want to change current icon set or Quasar I18n language
  // (must include CDN links so they are available first!)
  i18n,
  icons
}

用法

因此，在找出需要嵌入到网页中的CDN链接后（希望您已经检查了由UMD入门套件创建的项目文件夹）后，现在是时候使用Quasar了。

您会注意到，所有的Quasar组件、Quasar指令和Quasar插件都在其页面顶部有一个安装部分。 使用UMD时，您可以跳过这些部分，因为它仅用于从[主入门套件]（/app-installation.html）生成项目时使用。

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

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

<!-- 在文档中仅用于主入门套件 -->
<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.actionSheet.create({...})

Quasar实用工具

一个例子。

Quasar.utils.event.getEventKey(evt)

改变Quasar图标集

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

Quasar.icons.set(Quasar.icons.fontawesome)

改变Quasar I18n语言

假设您已经为您想要的Quasar I18n语言添加了CDN链接（除非您需要默认使用的“en-us”语言包），那么您可以告诉Quasar使用它：

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

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

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

Quasar CLI 安装