如果您想将Quasar嵌入到您现有的网站项目中，并以渐进的方式进行整合，那么请选择UMD / Standalone（统一模块定义）版本。
安装
UMD就是添加Quasar样式和javascript标签。 请选择您要使用的内容，然后查看其下方的输出。
WARNING
你可以同时使用Fontawesome v5和v6网页字体。更多信息请参考他们的升级指南。
<!DOCTYPE html>
<html>
<!--
WARNING! Make sure that you match all Quasar related
tags to the same version! (Below it's "@1.20.2")
-->
<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.20.2/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.20.2/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插件都可以直接使用。 无需其他代码即可安装它们。 只要确保您将不使用自关闭标签即可。
JsFiddle / Codepen
您也可以在Github上fork和使用这些链接来报告问题：
| 提供者 | URL |
|---|---|
| jsFiddle | https://jsfiddle.net/rstoenescu/rmaodk0f |
| Codepen | https://codepen.io/rstoenescu/pen/VgQbdx |
这些链接（显然）使用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.colors.getBrand('primary')
Quasar.utils.openURL('https://quasar.dev')
Quasar.utils.debounce(fn, 200)
Quasar.utils.is.deepEqual(objA, objB)
Quasar.QBtn
Quasar.Notify.create('Hi and welcome!')
改变Quasar图标集
假设您已经为您喜欢的Quasar图标集添加了CDN链接（除非您使用默认使用的Material图标），那么您可以告诉Quasar使用它：
Quasar.iconSet.set(Quasar.iconSet.fontawesomeV6)
改变Quasar语言包
假设您已经为您想要的Quasar I18n语言添加了CDN链接（除非您需要默认使用的“en-us”语言包），那么您可以告诉Quasar使用它：
// 例如设置德语,
// 使用ISO 2字母码:
Quasar.lang.set(Quasar.lang.de)
// 例如设置Portuguese (巴西) 语言:
Quasar.lang.set(Quasar.lang.ptBr)
可用语言列表可以在GitHub上找到。 如果您所需的语言包尚不可用，您可以通过提供PR来提供帮助。 我们欢迎任何语言！