uView Pro 组件库技能
0This skill provides a library of UI components and utility functions tailored for developing uni-app pages. It is designed for developers who are working with the uView Pro UI framework.
000Updated 2mo ago
UI Development
Quick InstallView Source
$ npx skills add https://github.com/uview-pro/skills --skill uview-proOverview
About This Skill
The uView Pro 组件库技能provides access to the uView Pro component library, a cross-platform UI framework designed for uni-app development. It includes pre-built components and utility functions that streamline page development for developers working with the uView Pro framework. This skill collection is sourced from the official uView Pro documentation and enables developers to leverage standardized components across multiple platforms. It helps reduce development time by providing ready-to-use UI elements instead of building from scratch. Developers building uni-app applications benefit from consistent component behavior and access to the full uView Pro library documentation.
How to Use
Install using the npm command provided.
Use Cases
Developing uni-app pages efficiently
Using prefixed components like u-button and u-input
Utilizing utility functions such as debounce and deep copy
Implementing customized hooks like useToast and useModal
Tags
Setup & Installation
Quick Install
Terminal
$ npx skills add https://github.com/uview-pro/skills --skill uview-proAlternative Install (Git Clone)
git clone https://github.com/uview-pro/skillsRequirements
- Claude Code or compatible AI agent
Quick Start Guide
1
Install the Skill
Copy the install command above and run it in your terminal.
2
Open Your AI Agent
Launch Claude Code, Cursor, or your preferred AI coding agent.
3
Try It Out
Use the prompt template or examples below to test the skill.
4
Customize
Adapt the skill to your specific use case and workflow.
Usage Examples
Prompt Template
Generate a [COMPONENT_NAME] component for uView Pro in uni-app. Use the props: [PROPS_LIST]. Ensure the component is responsive, follows uView Pro design guidelines, and includes TypeScript support. Provide a working example with sample data: [SAMPLE_DATA].
Example Output
# uView Pro - Custom Card Component
Here’s a responsive `u-card-pro` component for uView Pro with TypeScript support, including a working example:
## Component Code
```vue
<template>
<u-card
:title="title"
:sub-title="subtitle"
:thumb="thumb"
:border-radius="borderRadius"
:padding="padding"
@click="handleClick"
>
<view class="u-card-content">
<slot>{{ content }}</slot>
</view>
<template #footer>
<u-button
v-if="showAction"
type="primary"
size="small"
:text="actionText"
@click.stop="handleAction"
/>
</template>
</u-card>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
export default defineComponent({
name: 'u-card-pro',
props: {
title: {
type: String,
default: 'Card Title'
},
subtitle: {
type: String,
default: ''
},
thumb: {
type: String,
default: ''
},
content: {
type: String,
default: 'Default card content goes here.'
},
borderRadius: {
type: [String, Number],
default: 8
},
padding: {
type: [String, Number],
default: 24
},
showAction: {
type: Boolean,
default: true
},
actionText: {
type: String,
default: 'Learn More'
}
},
emits: ['click', 'action'],
methods: {
handleClick() {
this.$emit('click');
},
handleAction() {
this.$emit('action');
}
}
});
</script>
<style scoped>
.u-card-content {
color: #333;
font-size: 14px;
line-height: 1.5;
}
</style>
```
## Usage Example
```vue
<template>
<u-card-pro
title="Premium Plan"
subtitle="Unlock all features"
thumb="/static/premium-icon.png"
:border-radius="12"
:padding="32"
@action="handleUpgrade"
>
<view>
<text>Get access to advanced analytics, priority support, and exclusive templates.</text>
<text class="highlight">Only $9.99/month!</text>
</view>
</u-card-pro>
</template>
<script setup>
const handleUpgrade = () => {
console.log('Upgrade clicked');
uni.navigateTo({ url: '/pages/upgrade' });
};
</script>
```
## Props Breakdown
| Prop | Type | Default | Description |
|------|------|---------|-------------|
| title | String | 'Card Title' | Card title text |
| subtitle | String | '' | Optional subtitle |
| thumb | String | '' | Path to thumbnail image |
| content | String | 'Default...' | Slot content fallback |
| borderRadius | [String, Number] | 8 | Border radius in pixels |
| padding | [String, Number] | 24 | Inner padding in pixels |
| showAction | Boolean | true | Toggle action button visibility |
| actionText | String | 'Learn More' | Action button text |
## Events
- **@click**: Emitted when the card is clicked
- **@action**: Emitted when the action button is clickedFind the right skills for your stack
Take a free 3-minute scan and get personalized AI skill recommendations.
Take free scan