@aurora-design/vue NPM

文档

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()

lodash-es nanoid vite-plugin-dts

@everything-registry/sub-chunk-96 @infinitebrahmanuniverse/nolb-_aur @zalastax/nolb-_aur

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago