Huayue Component Library hy-app Usage Guide

Warm Tips

• Recommended node (recommended) >= 16.14.0, sass (recommended)
• 1.53.0 <= sass <= 1.101.0

🚀 Download scss (install if not already installed)

Warm Tips

The Huayue Component Library uses scss, so for those who haven't installed the scss plugin, it is necessary to install it.

npm

$ npm install -D [email protected]

pnpm

$ pnpm add -D [email protected]

cnpm

$ cnpm install -D [email protected]

yarn

$ yarn add -D [email protected]

🌈 Download dayjs (install if not already installed)

Warm Tips

Since the time selector uses dayjs, it is necessary to download dayjs when using it. Otherwise, an error will occur.

npm

$ npm install dayjs

pnpm

$ pnpm add dayjs

cnpm

$ cnpm install dayjs

yarn

$ yarn add dayjs

🌵 Install hy-app

Important Notice

As of 2026-07-13, hy-app has stopped further iteration updates since version v0.7.4. It will no longer add new features or fix issues. Please download and migrate to the new version @hy-app/ui.

npm

$ npm install @hy-app/ui

pnpm

$ pnpm add @hy-app/ui

cnpm

$ cnpm install @hy-app/ui

yarn

$ yarn install @hy-app/ui

Configure global component auto-import

Modify the ./src/pages.json file in the project root directory and add the following easycom configuration:

./src/pages.json

{
    "easycom": {
        "custom": {
            "^hy-(.*)": "@hy-app/ui/components/hy-$1/hy-$1.vue"
        }
    }
}

Make Volar/VS Code recognize components

VS Code and trae can provide property hints, type checking, and automatic completion for components.

{
    "compilerOptions": {
        "types": ["@hy-app/ui/global"]
    }
}

🐔 Globally import component library styles (modify uni.scss)

The global styles, theme variables, and basic component styles of the Huayue Component Library need to be imported uniformly; otherwise, the components may lose their style effects.

./uni.scss

@use '@hy-app/ui/index.scss' as *;

🌳 Use components on pages

<template>
    <!-- Use the components directly on the required page -->
    <hy-input></hy-input>
</template>