open-index/open-npm huggingface dataset:
npm package: @liushangli/xs-ui
Description: 基于Element Plus的企业级Vue3 UI组件库
Latest version: 0.1.1

# 🎨 XS-UI

基于 Element Plus 的企业级 Vue3 UI 组件库

## ✨ 特性

- 🔥 **Vue 3** - 使用最新的 Vue 3 Composition API
- 💪 **TypeScript** - 完整的 TypeScript 支持  
- 🎨 **企业级** - 基于 Element Plus，经过生产环境验证
- 📦 **开箱即用** - 一键安装，无需复杂配置
- 🛠 **组件丰富** - 40+ 高质量组件
- 🎯 **按需导入** - 支持 Tree Shaking

## 🚀 快速开始

### 安装

```bash
npm install xs-ui
# 或
yarn add xs-ui  
# 或
pnpm add xs-ui
```

### 完整引入

```typescript
// main.ts
import { createApp } from 'vue'
import XsUI from 'xs-ui'
import 'xs-ui/dist/style.css'
import App from './App.vue'

const app = createApp(App)
app.use(XsUI)
app.mount('#app')
```

### 按需引入

```typescript
// 组件按需引入
import { XsButton, XsInput } from 'xs-ui'

// 在模板中使用
<template>
  <xs-button type="primary">按钮</xs-button>
  <xs-input v-model="value" placeholder="请输入"></xs-input>
</template>
```

## 📖 组件使用

### 按钮组件

```vue
<template>
  <!-- 基础按钮 -->
  <xs-button>默认按钮</xs-button>
  <xs-button type="primary">主要按钮</xs-button>
  <xs-button type="success">成功按钮</xs-button>
  
  <!-- 不同尺寸 -->
  <xs-button size="large">大按钮</xs-button>
  <xs-button size="default">默认按钮</xs-button>
  <xs-button size="small">小按钮</xs-button>
</template>
```

### 输入框组件

```vue
<template>
  <xs-input 
    v-model="value" 
    placeholder="请输入内容"
    clearable
  />
</template>

<script setup>
import { ref } from 'vue'
const value = ref('')
</script>
```

### 表单组件

```vue
<template>
  <xs-form :model="form" label-width="100px">
    <xs-form-item label="用户名">
      <xs-input v-model="form.username" />
    </xs-form-item>
    <xs-form-item label="邮箱">
      <xs-input v-model="form.email" />
    </xs-form-item>
    <xs-form-item>
      <xs-button type="primary" @click="onSubmit">提交</xs-button>
    </xs-form-item>
  </xs-form>
</template>
```

## 🎯 可用组件

基础组件：
- **XsButton** - 按钮
- **XsInput** - 输入框  
- **XsSelect** - 选择器
- **XsRadio** - 单选框
- **XsCheckbox** - 多选框
- **XsSwitch** - 开关

表单组件：
- **XsForm** - 表单
- **XsFormItem** - 表单项
- **XsDatePicker** - 日期选择器
- **XsTimePicker** - 时间选择器
- **XsUpload** - 文件上传

数据展示：
- **XsTable** - 表格
- **XsCard** - 卡片
- **XsTag** - 标签
- **XsProgress** - 进度条
- **XsTree** - 树形控件

导航组件：
- **XsMenu** - 导航菜单
- **XsTabs** - 标签页
- **XsBreadcrumb** - 面包屑
- **XsSteps** - 步骤条
- **XsPagination** - 分页

反馈组件：
- **XsAlert** - 警告提示
- **XsMessage** - 消息提示
- **XsDialog** - 对话框
- **XsDrawer** - 抽屉
- **XsPopover** - 弹出框
- **XsTooltip** - 文字提示

## 🛠 开发

```bash
# 克隆项目
git clone <repository-url>
cd xs-ui

# 安装依赖
npm install

# 启动开发服务器
npm run dev

# 构建库文件
npm run build:lib

# 构建完整项目
npm run build
```

## 📄 许可证

基于 MIT 许可证，详见 [LICENSE](./LICENSE) 文件。

## 🤝 贡献

欢迎提交 Issue 和 Pull Request！

---

**XS-UI** - 让企业级开发更简单 🚀
npm package: @liushanshan666/web-recorder
Description: ## Project setup ``` npm install ```
Latest version: 0.1.6

# web-recorder

## Project setup
```
npm install
```

### Compiles and hot-reloads for development
```
npm run serve
```

### Compiles and minifies for production
```
npm run build
```

### Lints and fixes files
```
npm run lint
```

### Customize configuration
See [Configuration Reference](https://cli.vuejs.org/config/).