Vue 快速开始

安装

pnpm add @hhl/vue

Vue 3 需要单独安装，组件库把它当作 peer dependency：

pnpm add vue

全局注册

import '@hhl/vue/style.css';
import HhlVue from '@hhl/vue';
import { createApp } from 'vue';
import App from './App.vue';

createApp(App).use(HhlVue).mount('#app');

按需引入

只需要一两个组件时，直接导入，构建工具会把其余部分摇掉：

<script setup lang="ts">
import { Button } from '@hhl/vue';
</script>

<template>
  <Button variant="primary">保存</Button>
</template>

可交互示例

下面这个按钮就是 Button 组件本身，直接跑在这一页里：

这是一个真实的 Vue 组件：构建时预渲染成 HTML，滚动到可见时才水合，所以首屏没有它也能看。

它有两种状态值得注意：构建时它被预渲染成静态 HTML，所以在浏览器执行 JS 之前、或者在禁用 JS 的环境里，按钮和文案都已经在页面上了；滚动到可见时才水合，点击才真正生效。

写文档时只需要 client:visible 一个指令，不需要额外配置：

import ButtonDemo from '../../../components/demo/ButtonDemo.vue';

<ButtonDemo client:visible />

主题

所有样式都从 CSS 变量读，覆盖变量就能换主题，不需要改选择器：

:root {
  --hhl-color-accent: #4f46e5;
  --hhl-radius: 8px;
}

变量的完整清单在每个组件的文档页底部。

主题颜色

主题颜色

Vue 快速开始

安装

全局注册

按需引入

可交互示例

主题