“光之轮”@celestia-island /
Vue 3组件库与hikari Rust/WASM渲染器共享SCSS样式。
安装
npm install @celestia-island/hikari
pnpm add @celestia-island/hikari
建立需求
这个包裹是 源分布tarball装载TypeScript，
TSX和SCSS源下 src/，您的构建管道将它们编译为
自身的代码。没有什么是预先捆绑的，所以消费项目必须提供：
| 要求 | 为什么 |
|---|---|
vue (同行依赖) | 组件是为Vue 3编写的，并在运行时导入Vue。 |
| TypeScript-aware打包机 | 组件和可组合入口点解析为 .ts/.tsx 来源(main/types → src/index.ts）。 |
| 我们支持JSX | 组件被编写为 .tsx 渲染函数，而不是sfc -启用 @vitejs/plugin-vue-jsx （或您的捆绑商的等效）。 |
sass 在你的工具链中 | 样式分布为SCSS； @celestia-island/hikari/styles 解析为 .scss 聚合您的打包器编译。安装 sass 作为消费项目的devDependency。 |
最小Vite配置：
// vite.config.ts
import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx'
export default {
plugins: [vue(), vueJsx()],
}
使用
在你的应用入口点导入样式：
// main.ts
import "@celestia-island/hikari/styles";
import { createApp } from "vue";
import App from "./App.vue";
createApp(App).mount("#app");
在模板中使用组件：
<script setup lang="ts">
import { HkButton, HkCard, HkInput } from "@celestia-island/hikari";
</script>
<template>
<HkCard>
<HkInput v-model="text" placeholder="Type..." />
<HkButton variant="primary">Submit</HkButton>
</HkCard>
</template>
组件
- HkButton -主要/次要/危险/幽灵变体
- HkCard -可悬浮卡片容器
- HkInput -文本输入与v-model
- HkModal -传送对话
- HkSidebar -可折叠的边栏
- HkTabs -选项卡导航
- HkToast -吐司通知
- HkAvatar -图像/备用头像
- 和更多的……
开发
packages/vue 是它自己的PNPM工作区。后 corepack pnpm install：
pnpm test # Vitest suite (colocated *.test.ts(x), happy-dom)
pnpm test:watch # Vitest in watch mode
pnpm lint # vue-tsc --noEmit type check