0.1.56 • Published 1 year ago

@aurora-design/vue v0.1.56

Weekly downloads
-
License
GPL-3.0-only
Repository
-
Last release
1 year ago

文档

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(单页面应用)支持

  1. 新建一个 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>
  1. 新建一个 /src/app/bootstrap.ts 文件,粘贴下面的代码。
import { createApp } from "vue";
import appComponent from "./app.vue";

// VueJs
const app = createApp(appComponent);

app.mount("#aurora");
  1. 新建一个 /src/app/app.vue 文件,开始编写你的应用。

后续,所有关于 SPA 的页面,请都放置在 /src/app 里,而非 Astro 的 /src/pages 目录当中。

全局加载

在页面加载完成之前,会有一定时间的加载,加载完成后会淡入显示应用本身。因此,你可以在 #aurora 之外,编写你的加载中视图,可以显示你的 Logo 也可以显示骨架图,也可以什么都不写保持纯白。不用担心错位,因为整个 #aurorafixed 在页面上的。你可以在外部编写任何元素。

引入第三方 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()
0.1.56

1 year ago

0.1.54

1 year ago

0.1.55

1 year ago

0.1.53

1 year ago

0.1.52

1 year ago

0.1.50

1 year ago

0.1.51

1 year ago

0.1.49

1 year ago

0.1.46

1 year ago

0.1.47

1 year ago

0.1.48

1 year ago

0.1.43

1 year ago

0.1.44

1 year ago

0.1.45

1 year ago

0.1.41

1 year ago

0.1.42

1 year ago

0.1.40

1 year ago

0.1.38

1 year ago

0.1.39

1 year ago

0.1.30

1 year ago

0.1.31

1 year ago

0.1.32

1 year ago

0.1.33

1 year ago

0.1.34

1 year ago

0.1.35

1 year ago

0.1.36

1 year ago

0.1.37

1 year ago

0.1.27

1 year ago

0.1.28

1 year ago

0.1.29

1 year ago

0.1.22

1 year ago

0.1.23

1 year ago

0.1.24

1 year ago

0.1.25

1 year ago

0.1.26

1 year ago

0.1.20

1 year ago

0.1.21

1 year ago

0.1.19

2 years ago

0.1.10

2 years ago

0.1.11

2 years ago

0.1.12

2 years ago

0.1.13

2 years ago

0.1.14

2 years ago

0.1.15

2 years ago

0.1.9

2 years ago

0.1.16

2 years ago

0.1.17

2 years ago

0.1.18

2 years ago

0.1.2

2 years ago

0.1.8

2 years ago

0.1.4

2 years ago

0.1.3

2 years ago

0.1.5

2 years ago

0.1.1

2 years ago

0.1.1-alpha.0

3 years ago

0.1.0-alpha.50

3 years ago

0.1.0-alpha.52

3 years ago

0.1.0-alpha.51

3 years ago

0.1.0-alpha.10

3 years ago

0.1.0-alpha.12

3 years ago

0.1.0-alpha.14

3 years ago

0.1.0-alpha.13

3 years ago

0.1.0-alpha.16

3 years ago

0.1.0-alpha.15

3 years ago

0.1.0-alpha.18

3 years ago

0.1.0-alpha.17

3 years ago

0.1.0-alpha.19

3 years ago

0.1.0-alpha.21

3 years ago

0.1.0-alpha.20

3 years ago

0.1.0-alpha.23

3 years ago

0.1.0-alpha.22

3 years ago

0.1.0-alpha.25

3 years ago

0.1.0-alpha.24

3 years ago

0.1.0-alpha.27

3 years ago

0.1.0-alpha.26

3 years ago

0.1.0-alpha.29

3 years ago

0.1.0-alpha.28

3 years ago

0.1.0-alpha.30

3 years ago

0.1.0-alpha.32

3 years ago

0.1.0-alpha.31

3 years ago

0.1.0-alpha.34

3 years ago

0.1.0-alpha.33

3 years ago

0.1.0-alpha.36

3 years ago

0.1.0-alpha.35

3 years ago

0.1.0-alpha.38

3 years ago

0.1.0-alpha.37

3 years ago

0.1.0-alpha.39

3 years ago

0.1.0-alpha.41

3 years ago

0.1.0-alpha.40

3 years ago

0.1.0-alpha.43

3 years ago

0.1.0-alpha.42

3 years ago

0.1.0-alpha.45

3 years ago

0.1.0-alpha.44

3 years ago

0.1.0-alpha.47

3 years ago

0.1.0-alpha.46

3 years ago

0.1.0-alpha.9

3 years ago

0.1.0-alpha.8

3 years ago

0.1.0-alpha.5

3 years ago

0.1.0-alpha.4

3 years ago

0.1.0-alpha.7

3 years ago

0.1.0-alpha.6

3 years ago

0.1.0-alpha.1

3 years ago

0.1.0-alpha.3

3 years ago

0.1.0-alpha.2

3 years ago

0.1.0-alpha.0

3 years ago

0.0.7

3 years ago

0.0.6

3 years ago

0.0.5

3 years ago

0.0.4

3 years ago

0.0.3

3 years ago

0.0.2

3 years ago

0.0.1

3 years ago