When to use this skill
Use this skill whenever the user wants to:
- Build uni-app mobile applications with uView UI Vue 2 components
- Use uView components (Button, Input, Form, Table, Modal, Tabs, etc.)
- Use $u utility tools ($u.toast, $u.http, $u.storage, $u.route)
- Customize the uView UI theme via SCSS variables
- Set up uView UI in a Vue 2 uni-app project
How to use this skill
Workflow
- Install - Install uView UI plugin and register with
Vue.use()in main.js - Configure easycom - Set up easycom in pages.json for auto component registration
- Choose component - Match the UI need to component from reference below
- Load example file - Each component has detailed examples in
examples/components/
Quick-Start: Setup and Basic Usage
// main.js
import Vue from 'vue'
import uView from 'uview-ui'
Vue.use(uView)<!-- pages.json - add easycom config -->
{
"easycom": {
"^u-(.*)": "uview-ui/components/u-$1/u-$1.vue"
}
}Example: Form with $u Tools
<template>
<view>
<u-form :model="form" :rules="rules" ref="uForm">
<u-form-item label="Name" prop="name">
<u-input v-model="form.name" placeholder="Enter name" />
</u-form-item>
<u-form-item label="Phone" prop="phone">
<u-input v-model="form.phone" type="number" placeholder="Enter phone" />
</u-form-item>
</u-form>
<u-button type="primary" @click="submit">Submit</u-button>
</view>
</template>
<script>
export default {
data() {
return {
form: { name: '', phone: '' },
rules: {
name: [{ required: true, message: 'Name is required', trigger: 'blur' }],
phone: [{ required: true, message: 'Phone is required', trigger: 'blur' }]
}
}
},
methods: {
submit() {
this.$refs.uForm.validate(valid => {
if (valid) this.$u.toast('Success!')
})
}
}
}
</script>Component Categories
| Category | Components | Example Files |
|---|---|---|
| Form | Button, Input, Form, Picker, Tabs | examples/components/form.md, button.md |
| Display | List, Card, Badge, Grid, Swiper, Table | examples/components/list.md, table.md |
| Feedback | Modal, Toast, Loading | examples/components/modal.md |
| Navigation | Navbar, Tabs | examples/components/navbar.md |
$u Tools Reference
| Tool | Usage | Example File |
|---|---|---|
| Toast | this.$u.toast('message') | examples/tools/toast.md |
| HTTP | this.$u.http.get(url) | examples/tools/http.md |
| Storage | this.$u.storage.set(key, val) | examples/tools/storage.md |
| Route | this.$u.route('/pages/home') | examples/tools/route.md |
| Debounce | this.$u.debounce(fn, 300) | examples/tools/debounce.md |
API Reference
api/components.md- Component props, events, and slotsapi/tools.md- $u utility method signaturesapi/theme-variables.md- SCSS theme variables
Best Practices
- Use easycom - Configure easycom in pages.json for automatic component registration
- SCSS theme variables - Override uView SCSS variables for custom branding, not inline styles
- Use rpx units - Ensure responsive layouts across screen sizes in uni-app
- Leverage $u tools - Use built-in HTTP, storage, and route helpers instead of extra libraries
- Test cross-platform - Verify on H5, WeChat mini-program, and native App
Resources
- Official Docs: https://www.uviewui.com/
- GitHub: https://github.com/umicro/uView
Keywords
uView UI, uView, Vue 2, uni-app, $u, component library, 组件库, Button, Form, Table, Modal, Toast, 按钮, 表单, 表格, 模态框, mobile UI