Installation
Prerequisites
Before you begin, please ensure that your development environment meets the following requirements:
- Vue: >= 3.5.0
- Node.js: >= 18.12.0 (Latest LTS version recommended)
- Package Manager: Recommended: pnpm
Using a Package Manager
We recommend using a package manager to install YH-UI to benefit from full type support and build optimizations.
pnpm add @yh-ui/yh-uinpm install @yh-ui/yh-uiyarn add @yh-ui/yh-uiCDN Usage
You can use YH-UI directly in HTML via CDN. We support unpkg and jsDelivr.
<head>
<!-- Style file -->
<link rel="stylesheet" href="https://unpkg.com/@yh-ui/yh-ui/dist/style.css" />
<!-- Dependency Vue -->
<script src="https://unpkg.com/vue@3"></script>
<!-- Component Library JS -->
<script src="https://unpkg.com/@yh-ui/yh-ui"></script>
</head><head>
<!-- Style file -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@yh-ui/yh-ui/dist/style.css" />
<!-- Dependency Vue -->
<script src="https://cdn.jsdelivr.net/npm/vue@3"></script>
<!-- Component Library JS -->
<script src="https://cdn.jsdelivr.net/npm/@yh-ui/yh-ui"></script>
</head>Note
In production environments, it is recommended to lock specific version numbers in the URL (e.g., @yh-ui/yh-ui@1.0.0) to avoid unintentional breaking changes.
On-demand Import
YH-UI supports Tree Shaking out of the box. By importing components directly, build tools (like Vite or Webpack) will automatically exclude unused code.
<script setup lang="ts">
import { YhButton } from '@yh-ui/yh-ui'
</script>Automatic On-demand Import (Recommended)
With the help of plugins, you can use YH-UI components just like native HTML tags without manual import calls.
1. Install Plugins
pnpm add -D unplugin-vue-components2. Configure Vite
Register the resolver in vite.config.ts:
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import Components from 'unplugin-vue-components/vite'
import { YhUIResolver } from '@yh-ui/@yh-ui/@yh-ui/yh-ui/resolver' // Ensure you have installed @yh-ui/yh-ui
export default defineConfig({
plugins: [
vue(),
Components({
resolvers: [
YhUIResolver({
// If automatic style import is required
importStyle: 'sass'
})
]
})
]
})TypeScript Support
If you are using TypeScript, we recommend configuring compilerOptions.types in tsconfig.json to ensure full type inference for global components:
{
"compilerOptions": {
"types": ["@yh-ui/yh-ui/global"]
}
}