# jvyou-ui

**Repository Path**: jvyou/jvyou-ui

## Basic Information

- **Project Name**: jvyou-ui
- **Description**: Jvyou UI，个人组件库
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2024-03-04
- **Last Updated**: 2026-01-03

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

<p align="center" style="overflow: hidden;border-radius: 50%;">
    <a href="https://gitee.com/jvyou" target="_blank">
      <img style="display: block;" src="https://gitee.com/jvyou/jvyou-node/raw/master/images/ymm.jpg" width="280" />
    </a>
</p>


<h1 align="center">Jvyou UI</h1>
<p align="center"><strong>一个基于Vue3，Vite驱动的现代UI组件库。<em>持续更新 ing～</em></strong></p>

<div align="center">
 <a href="#Jvyou"><img src="https://gitee.com/jvyou/jvyou-node/raw/master/images/Jvyou-%E6%A9%98%E6%9F%9A.svg"></a>
 <a href="#QQ"><img src="https://gitee.com/jvyou/jvyou-node/raw/master/images/Jvyou-QQ.svg"></a>
</div>



# 安装

## 使用包管理器

我们建议您使用包管理器（如 NPM、Yarn 或 pnpm）安装 Jvyou UI，然后您就可以使用打包工具，例如 Vite 或 webpack。


```shell
# npm
npm install jvyou-ui
# pnpm
pnpm add jvyou-ui
# yarn
yarn add jvyou-ui
```

## 兼容性

Jvyou UI 支持最近两个版本的浏览器。

如果您需要支持旧版本的浏览器，请自行添加 [Babe](https://babeljs.io/)l 和相应的 Polyfill 。

由于 Vue 3 不再支持 IE11，Jvyou UI 也不再支持 IE 浏览器。 浏览器的支持情况如下：

| <img src="/chrome.svg" width="24px" height="24px" alt="Chrome"> | <img src="/firefox_48x48.png" width="24px" height="24px" alt="Firefox"> | <img src="/edge_48x48.png" width="24px" height="24px" alt="Edge"> | <img src="/safari_48x48.png" width="24px" height="24px" alt="Safari"> | <img src="/opera_48x48.png" width="24px" height="24px" alt="Opera"> |
|:---------------------------------------------------------------:|:-----------------------------------------------------------------------:|:-----------------------------------------------------------------:|:---------------------------------------------------------------------:|:-------------------------------------------------------------------:|
|                         last 2 versions                         |                             last 2 versions                             |                          last 2 versions                          |                            last 2 versions                            |                           last 2 versions                           |

## 版本

Jvyou UI 目前还处于快速开发迭代中。


# 快速开始

本节将介绍如何在项目中使用 Element Plus。

## 用法

### 完整引入

如果你对打包后的文件大小不是很在乎，那么使用完整导入会更方便。

```typescript
// main.ts
import {createApp} from 'vue'
import JvyouUI from 'jvyou-ui'
import 'jvyou-ui/style'
import App from './App.vue'

const app = createApp(App)

app.use(JvyouUI)
app.mount('#app')
```

### 按需导入

您需要使用额外的插件来导入要使用的组件。

## 开始使用

```textmate
<script setup lang="ts">
import {JButton} from 'jvyou-ui'
</script>

<template>
  <div class="box">
    <JButton>默认按钮</JButton>
    <JButton type="dashed">虚线按钮</JButton>
    <JButton type="primary">主按钮</JButton>
  </div>
</template>
```