home / skills / partme-ai / full-stack-skills / uniapp-uview

uniapp-uview skill

safe

This skill helps you integrate uView UI into UniApp projects, configure platform-specific settings, and optimize cross-platform behavior for H5, mini-program,

npx playbooks add skill partme-ai/full-stack-skills --skill uniapp-uview

Review the files below or copy the command above to add this skill to your agents.

Files (20)

SKILL.md

6.3 KB

---
name: uniapp-uview
description: A comprehensive skill for integrating and using uView UI with UniApp projects. This skill focuses on UniApp-specific integration, configuration, and platform-specific considerations when using uView UI in UniApp applications. Use this skill whenever the user needs to integrate uView UI into UniApp projects, configure UniApp-specific settings, or handle platform differences.
license: Complete terms in LICENSE.txt
---

## When to use this skill

Use this skill whenever the user wants to:
- Integrate uView UI into UniApp projects
- Configure UniApp projects to work with uView UI (pages.json, manifest.json, easycom)
- Handle platform-specific behaviors when using uView in UniApp (H5, mini-program, App, nvue)
- Use UniApp features (navigation, APIs, lifecycle) with uView components
- Build cross-platform UniApp applications with uView UI components
- Configure easycom for automatic uView component import in UniApp
- Handle navigation and routing with uView in UniApp
- Optimize UniApp projects using uView UI
- Deploy uView-based UniApp applications to multiple platforms

## How to use this skill

This skill is organized to match UniApp integration patterns and the official UniApp plugin structure (https://ext.dcloud.net.cn/plugin?id=1593). When working with uView UI in UniApp:

1. **Install and setup** uView UI in UniApp project:
   - Load `examples/getting-started/installation.md` for installation in UniApp
   - Load `examples/getting-started/project-setup.md` for UniApp project configuration
   - Load `examples/getting-started/easycom-config.md` for easycom configuration

2. **Integrate with UniApp features**:
   - Load `examples/integration/pages-config.md` for pages.json configuration
   - Load `examples/integration/manifest-config.md` for manifest.json configuration
   - Load `examples/integration/navigation.md` for navigation with uView
   - Load `examples/integration/uni-api.md` for using UniApp APIs with uView

3. **Handle platform-specific behaviors**:
   - Load `examples/platform-specific/h5.md` for H5 platform considerations
   - Load `examples/platform-specific/miniprogram.md` for mini-program considerations
   - Load `examples/platform-specific/app.md` for App platform considerations
   - Load `examples/platform-specific/nvue.md` for nvue considerations

4. **Advanced integration**:
   - Load `examples/advanced/custom-theme.md` for theme customization in UniApp
   - Load `examples/advanced/build-optimization.md` for build optimization
   - Load `examples/advanced/multi-platform.md` for multi-platform deployment

5. **Reference the API documentation** when needed:
   - `api/integration-api.md` - UniApp and uView integration API
   - `api/config-api.md` - Configuration API reference

6. **Use templates** for quick start:
   - `templates/basic-uniapp-project.md` - Basic UniApp project with uView
   - `templates/pages-template.md` - Pages configuration template
   - `templates/manifest-template.md` - Manifest configuration template

**Important Notes**:
- This skill focuses on UniApp integration, not uView UI API documentation
- uView UI supports both Vue 2 and Vue 3, use appropriate syntax
- Always configure easycom in pages.json for automatic component import
- Use conditional compilation (`#ifdef`, `#endif`) for platform-specific code
- Test on all target platforms (H5, mini-programs, App) before deployment
- Use rpx units for responsive sizing in UniApp

## Examples and Templates

### Getting Started
- **Installation**: `examples/getting-started/installation.md` - How to install uView UI in UniApp projects
- **Project Setup**: `examples/getting-started/project-setup.md` - Setting up UniApp project with uView
- **Easycom Config**: `examples/getting-started/easycom-config.md` - Configuring easycom for automatic component import

### Integration
- **Pages Config**: `examples/integration/pages-config.md` - Configuring pages.json with uView
- **Manifest Config**: `examples/integration/manifest-config.md` - Configuring manifest.json for uView
- **Navigation**: `examples/integration/navigation.md` - Navigation and routing with uView
- **UniApp API**: `examples/integration/uni-api.md` - Using UniApp APIs with uView components

### Platform-Specific
- **H5**: `examples/platform-specific/h5.md` - H5 platform considerations with uView
- **Mini-Program**: `examples/platform-specific/miniprogram.md` - Mini-program considerations with uView
- **App**: `examples/platform-specific/app.md` - App platform considerations with uView
- **nvue**: `examples/platform-specific/nvue.md` - nvue considerations with uView

### Advanced
- **Custom Theme**: `examples/advanced/custom-theme.md` - Customizing themes in UniApp projects
- **Build Optimization**: `examples/advanced/build-optimization.md` - Optimizing UniApp builds with uView
- **Multi-Platform**: `examples/advanced/multi-platform.md` - Multi-platform deployment strategies

### Templates
- **Basic Project**: `templates/basic-uniapp-project.md` - Basic UniApp project structure with uView
- **Pages Template**: `templates/pages-template.md` - pages.json configuration template
- **Manifest Template**: `templates/manifest-template.md` - manifest.json configuration template

## API Reference

- **Integration API**: `api/integration-api.md` - UniApp and uView integration API reference
- **Config API**: `api/config-api.md` - Configuration API reference for UniApp projects

## Best Practices

1. **Use easycom**: Configure easycom in pages.json for automatic uView component import
2. **Platform Testing**: Test on all target platforms (H5, mini-programs, App)
3. **Use rpx Units**: Use rpx for responsive sizing in UniApp, px for fixed sizes
4. **SCSS Support**: Ensure SCSS is properly configured in UniApp project
5. **Manifest Configuration**: Properly configure manifest.json for each platform
6. **Conditional Compilation**: Use conditional compilation for platform-specific code
7. **Performance**: Optimize for each platform's specific requirements
8. **Navigation**: Use UniApp navigation API with uView components

## Resources

- **Official Plugin**: https://ext.dcloud.net.cn/plugin?id=1593
- **UniApp Documentation**: https://uniapp.dcloud.net.cn/
- **uView UI**: https://www.uviewui.com/

## Keywords

uniapp, uview, uview-ui, uniapp integration, uniapp configuration, easycom, pages.json, manifest.json, uni-app, 小程序, 跨平台, H5, App, nvue, 条件编译, 平台差异

Overview

This skill provides a focused, practical guide for integrating and using uView UI within UniApp projects. It covers installation, UniApp-specific configuration, platform differences, and templates to get cross-platform apps running quickly. Use it to reduce integration friction and follow UniApp best practices with uView components.

How this skill works

The skill maps common UniApp integration patterns to uView usage: installation steps, easycom automatic component import, pages.json and manifest.json configuration, and platform-specific notes for H5, mini-programs, App, and nvue. It includes templates, example configs, and references to integration and config API docs so you can apply changes directly to your UniApp project. Conditional compilation and build-optimization guidance help handle platform differences and performance tradeoffs.

When to use it

When adding uView UI to a new or existing UniApp project
When configuring easycom for automatic uView component import
When updating pages.json or manifest.json for uView components
When handling platform-specific issues (H5, mini-program, App, nvue)
When preparing multi-platform builds and deployment
When optimizing build output or customizing uView themes

Best practices

Always configure easycom in pages.json to avoid manual imports
Test builds on each target platform (H5, mini-programs, App, nvue) before release
Use rpx units for responsive layouts; use px for fixed-size UI elements
Apply conditional compilation (#ifdef / #endif) for platform-only logic
Enable SCSS support for theme customization and maintainable styles
Optimize manifest.json and platform-specific settings for performance

Example use cases

Quick-start template for a UniApp project preconfigured with uView and easycom
Configuring navigation and routing using UniApp APIs with uView components
Adjusting pages.json and manifest.json for mini-program and App builds
Creating a custom theme via SCSS variables and applying it across platforms
Using conditional compilation to include nvue-specific components only on supported builds
Following build-optimization tips to reduce bundle size for H5

FAQ

Does this skill include uView component API docs?

No. The focus is UniApp integration, configuration, and platform handling. For component APIs, refer to uView UI documentation.

Which Vue versions are supported?

uView supports both Vue 2 and Vue 3. Use the syntax and project setup appropriate for your UniApp version and follow the provided templates.