如果您想将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 "@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和使用这些链接来报告问题：
| 提供者 | URL |
|---|---|
| jsFiddle | https://jsfiddle.quasar.dev |
| Codepen | https://codepen.quasar.dev |
这些链接（显然）使用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)
改变Quasar语言包
假设您已经为您想要的Quasar I18n语言添加了CDN链接（除非您需要默认使用的“en-US”语言包），那么您可以告诉Quasar使用它：
// 例如设置德语,
// 使用ISO 2字母码:
Quasar.lang.set(Quasar.lang.de)
// 例如设置Portuguese (巴西) 语言:
Quasar.lang.set(Quasar.lang.ptBR)
可用语言列表可以在GitHub上找到。 如果您所需的语言包尚不可用，您可以通过提供PR来提供帮助。 我们欢迎任何语言！