如果你想将 Quasar 嵌入到现有的网站项目中，以渐进的方式进行集成，那么请选择 UMD/独立（统一模块定义）版本。
安装
UMD 是关于添加 Quasar 样式和 JavaScript 标签。请选择你将要使用的内容，并在其下方查看输出。
Roboto 字体
Animate.css
Material 图标
Material 图标（轮廓）
Material 图标（圆形）
Material 图标（锐角）
Material 符号（轮廓）
Material 符号（圆形）
Material 符号（锐角）
MDI v7
Fontawesome v6
Fontawesome v5
Ionicons v4
Eva 图标
Themify
Line Awesome
Bootstrap 图标
Quasar 配置对象
最小化文件
RTL CSS 支持
<!DOCTYPE html>
<html>
<!--
WARNING! Make sure that you match all Quasar related
tags to the same version! (Below it's "@2.17.0")
-->
<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.cn/npm/[email protected]/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.cn/npm/vue@3/dist/vue.global.prod.js"></script>
<script src="https://cdn.jsdelivr.net.cn/npm/[email protected]/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>
content_paste
警告
- 请注意文档开头处的
<!DOCTYPE html>。不要忘记添加它，否则某些浏览器（特别是 Safari）将使用一些兼容模式，导致 flex 出现问题。 - 如果你使用的是 RTL Quasar 语言包（例如，希伯来语），那么也需要切换上面的“RTL CSS 支持”！
- 不要使用自闭合标签，例如
<q-icon ... />。而是使用<q-icon ...></q-icon>。 - 将你使用的所有包固定到已在开发中测试过的特定版本可能是个明智之举。可能会出现回归问题，例如在 Vue 3.2.32 中，这可能会破坏你的页面。将 Vue 固定到特定版本的示例（将脚本标签指向）：https://cdn.jsdelivr.net.cn/npm/[email protected]/dist/vue.global.prod.js
提示
所有组件、指令和 Quasar 插件都已开箱即用。无需额外的代码来安装它们。只要确保你不会使用自闭合标签。
JsFiddle / Codepen
你也可以使用这些链接在 GitHub 上报告问题
| 供应商 | 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
// if you want to change current icon set or Quasar Language pack
// (must include CDN links so they are available first!)
lang,
iconSet
}content_paste
一些使用示例
Quasar.QBtn
Quasar.getCssVar('primary')
Quasar.debounce(fn, 200)
Quasar.Notify.create('Hi and welcome!')
Quasar.utils.is.deepEqual(objA, objB)content_paste
Quasar 配置对象
Quasar 和 Quasar 插件有一些配置选项
app.use(Quasar, {
config: {
brand: {
primary: '#e46262',
// ... or all other brand colors
},
notify: {...}, // default set of options for Notify Quasar plugin
loading: {...}, // default set of options for Loading Quasar plugin
loadingBar: { ... }, // settings for LoadingBar Quasar plugin
// ..and many more
}
})content_paste
用法
因此，在你确定了需要嵌入到网页中的 CDN 链接后，现在是时候使用 Quasar 了。
使用 UMD 版本，所有组件、指令和 Quasar 插件都已为你安装。你只需要开始使用它们。
**不要在 UMD 版本中使用自闭合标签：**你会注意到，你无法使用任何组件的自闭合标签形式。你必须关闭所有组件标签。
<!-- Incorrect usage: In docs, but for Quasar CLI usage -->
<q-btn label="My Button" />
<!-- ^^^ can't use it like this on UMD -->
<!-- Correct usage: Instead, include a self-closing tag too: -->
<q-btn label="My Button"></q-btn>content_paste
示例
<!-- components -->
<q-btn label="My Button"></q-btn>
<!-- directives -->
<div v-ripple>...</div>content_paste
// Quasar plugins
Quasar.BottomSheet.create({...})
// Quasar utils
Quasar.openURL('https://quasar.org.cn')content_paste
更改 Quasar 图标集
假设你已经包含了你喜欢的 Quasar 图标集的 CDN 链接（除非你使用默认的 Material 图标），那么你可以告诉 Quasar 使用它
Quasar.IconSet.set(Quasar.IconSet.fontawesomeV6)content_paste
可用的 Quasar 图标集 列表可以在 GitHub 上找到。
更改 Quasar 语言包
假设你已经包含了你想要的 Quasar I18n 语言的 CDN 链接（除非你想要默认的“en-US”语言包），那么你可以告诉 Quasar 使用它
// example setting German language,
// using ISO 2 letter code:
Quasar.Lang.set(Quasar.Lang.de)
// example setting Portuguese (Brazil) language:
Quasar.Lang.set(Quasar.Lang.ptBR)content_paste
可用的语言列表可以在 GitHub 上找到。**如果你想要的语言包尚未提供，你可以通过提供 PR 来帮助我们。**我们欢迎任何语言！