XiHan.UI
XiHan.UI 是一个基于 Vue 3 构建开发的高效、轻量级、现代化的组件库,开源免费,项目提供了丰富、美观的 UI 组件,可以帮助开发者快速构建现代化的用户界面。
功能特性
高性能架构
基于 Vue 3 Composition API 构建,兼顾性能与开发效率,带来更流畅的运行表现和更友好的开发体验。
模块化设计
采用 Monorepo 项目结构,拆分多个独立子包,支持按需引入,灵活组合,降低项目体积与复杂度。
全面类型支持
全量使用 TypeScript 开发,内置完善的类型定义与约束,有效提升代码质量与可维护性。
灵活主题系统
提供可扩展的主题定制能力,支持深色 / 浅色模式切换,轻松适配不同视觉风格。
国际化能力
内置多语言支持方案,简化多语言配置流程,助力快速构建全球化应用。
如何使用
第一步,安装 xihan-ui
使用npm
npm install xihan-ui
使用yarn
yarn add xihan-ui
使用pnpm (推荐)
pnpm add xihan-ui
完整引入
import { createApp } from "vue";
import App from "./App.vue";
import XiHanUI from "xihan-ui";
import "xihan-ui/dist/style.css";
const app = createApp(App);
app.use(XiHanUI);
app.mount("#app");
按需引入
<template>
<xh-button type="primary">XiHan Button</xh-button>
</template>
<script setup>
import { XhButton } from "@xihan-ui/components";
import "@xihan-ui/components/dist/button/style.css";
</script>
技术栈
Vue 3
基于最新的 Vue 3 Composition API 构建,充分利用现代框架特性,提升开发效率与运行性能。
TypeScript
全量采用 TypeScript 开发,提供完善的类型系统,增强代码可读性与稳定性。
TurboRepo
引入高效的 Monorepo 管理方案,加速构建流程,提升多包项目的协作与维护效率。
Unbuild
采用现代化构建工具,支持同时输出 ESM 与 CommonJS 格式,兼容不同运行环境与使用场景。
Vite
作为本地开发与测试的构建工具,提供极速启动与热更新体验,显著提升开发效率。
https://github.com/XiHanFun/XiHan.UI