@aurora-design/vue
v0.1.56
Published
Aurora Design 是一个基于 Vue 3 的组件库。
Downloads
198
Readme
文档
Aurora Design 是一个基于 Vue 3 的组件库。
注意：Aurora Design 不是使用 MIT 许可证开源的项目，我们使用 Version 3 of the GNU General Public License 许可证进行开源。
创建此组件库的目的，是帮助那些开发了有用的功能，但又想拥有一个漂亮的 UI 的开源应用使用。如果你正在开发一些闭源软件，除非你制作的项目经过了我们的认可，我们才会允许，即便你愿意为此付钱也不行。
bun i @aurora-design/vue概念
Aurora Design 是一个 Opinionated 的 Vue 3 组件库，这也是为什么它是 Design 而不是 UI Framework 的原因。你可以轻易地使用它像搭积木一样组装出漂亮的界面，但你很难将样式改写成你希望的其他风格。
Aurora Design 目前没有支持服务端渲染的计划。尽管大部分组件在 Astro 中可以被预选染，但是 JavaScript 部分是只能运行在浏览器中的，里面使用了大量依赖于 Vue 和 Window 的 API。
对于开源项目的作者，他们通常需要两个部分：SSG 和 SPA。
SSG（静态站点生成）用于制作应用的官网，他们是独立的 Astro 页面，偏重于展示而非交互，里面只使用一些 Aurora Design 的组件。
SPA（单页面应用）用于制作的应用本身，里面有较为复杂的功能和交互，在 Astro 里也是一个页面，但页面中的根组件被设置了 client:only 并大量使用 Aurora Design 本身的 API。
提示
Aurora Design v1.0 尚未发布。它可能存在一些潜在的问题，并且也没有编写详细的文档。在未来的版本，Bug 的修复和文档的编写是主要的工作。
起步
SSG（Astro 多页面模式）支持
推荐使用 Astro 开发，将以下内容粘贴在你的 index.astro 里。
<!doctype html>
<html>
<head>
<meta charset="UTF-8" />
<link rel="sitemap" href="/sitemap-index.xml" />
<meta name="color-scheme" content="light dark" />
<meta name="viewport" content="width=device-width" />
<meta name="description" content="Astro description" />
<link rel="icon" type="image/png" href="/favicon.png" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
<title>{Astro.props.title}</title>
</head>
<body ontouchstart="">
<div id="aurora" class="is-light is-mobile" data-props={JSON.stringify(Astro.props)} style={Astro.props.style}>
<!-- 在这里开始引用你的 Vue 组件 -->
</div>
</body>
<script>
import { bootstrap } from "@aurora-design/vue";
/**
* bootstrap
*/
void bootstrap(
{
colorMode: "light",
autoLoaded: true,
},
async (handler) => {
// await loader.script("https://res.wx.qq.com/open/js/jweixin-1.6.2.js");
return "no-script";
},
);
</script>
</html>
<style is:global>
@import url(@aurora-design/vue/dist/global.css);
@import url(@aurora-design/vue/dist/style.css);
/* 这里请引入 MiSans 和 RemixIcon */
</style>依赖
Aurora Design 依赖 MiSans 和 RemixIcon，请查阅它们的官网，手动安装引入它们。具体引入的位置，请参考下文代码中的注释。
SPA（单页面应用）支持
- 新建一个 Astro 页面，如
/src/pages/app.astro，粘贴下面的代码。
---
import IndexComponent from "./_components/IndexComponent.vue";
---
<!doctype html>
<html>
<head>
<meta charset="UTF-8" />
<link rel="sitemap" href="/sitemap-index.xml" />
<meta name="color-scheme" content="light dark" />
<meta name="viewport" content="width=device-width" />
<meta name="description" content="Astro description" />
<link rel="icon" type="image/png" href="/favicon.png" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
<title>{Astro.props.title}</title>
</head>
<body ontouchstart="">
<div id="aurora" class="is-light is-mobile" data-props={JSON.stringify(Astro.props)} style={Astro.props.style}>
<IndexComponent client:only />
</div>
</body>
<script>
import { bootstrap } from "@aurora-design/vue";
/**
* bootstrap
*/
void bootstrap(
{
colorMode: "light",
autoLoaded: true,
},
async (handler) => {
// await loader.script("https://res.wx.qq.com/open/js/jweixin-1.6.2.js");
return () => import("/src/app/bootstrap");
},
);
</script>
</html>
<style is:global>
@import url(@aurora-design/vue/dist/global.css);
@import url(@aurora-design/vue/dist/style.css);
/* 这里请引入 MiSans 和 RemixIcon */
</style>
- 新建一个
/src/app/bootstrap.ts文件，粘贴下面的代码。
import { createApp } from "vue";
import appComponent from "./app.vue";
// VueJs
const app = createApp(appComponent);
app.mount("#aurora");- 新建一个
/src/app/app.vue文件，开始编写你的应用。
后续，所有关于 SPA 的页面，请都放置在 /src/app 里，而非 Astro 的 /src/pages 目录当中。
全局加载
在页面加载完成之前，会有一定时间的加载，加载完成后会淡入显示应用本身。因此，你可以在 #aurora 之外，编写你的加载中视图，可以显示你的 Logo 也可以显示骨架图，也可以什么都不写保持纯白。不用担心错位，因为整个 #aurora 是 fixed 在页面上的。你可以在外部编写任何元素。
引入第三方 SDK
你可能需要引入一些第三方 SDK，这些请在你的 Astro 页面文件的 bootstrap 方法里引入。如：
bootstrap(
{
colorMode: "light",
autoLoaded: true,
},
async (handler) => {
await loader.script("https://res.wx.qq.com/open/js/jweixin-1.6.2.js");
return () => import("/src/app/bootstrap");
},
);通过这种方式引入，和直接写在代码中比起来，不会阻塞你的全局加载的正常显示，可以使你的全局加载更快地显示出来。
屏幕模式
对于 width <= 768 且高度大于宽度，则使用 mobile 模式。
使用 JavaScript
aurora.screen.mode === 'mobile'
aurora.screen.mode === 'desktop'使用 CSS
.is-mobile .your-element {
/* 这里写你仅在手机端生效的样式 */
}
.is-desktop .your-element {
/* 这里写你仅电脑端生效的样式 */
}颜色模式
使用 JavaScript
aurora.screen.colorMode === 'dark'
aurora.screen.colorMode === 'light'使用 CSS
.is-dark .your-element {
/* 这里写你仅在暗黑模式生效的样式 */
}
.is-light .your-element {
/* 这里写你仅亮色模式生效的样式 */
}获取屏幕宽高
aurora.screen.width
aurora.screen.height显示 Toast
aurora.toast.show({
message: "你好世界",
type: "primary",
button: "好的"
});多个 Toast 显示时，会进行累积，只有上一个 Toast 消失时才显示下一个，以免用户错过消息。
如果你期望清除屏幕上所有的 Toast，可以使用这个方法。
aurora.toast.removeAll()