How to Quickly Build High‑Quality UniApp Projects with DCloud Plugin Market and uni‑ui

Using the Plugin Market (Import‑and‑Use)

Open HBuilderX → Tools → Plugin Market.

Search for the required functionality (e.g., pull‑to‑refresh, calendar, dialog, carousel).

Click Import Plugin , select the current project, and the plugin is installed automatically.

Common free plugins for beginners

uni-load-more – load‑more functionality.

uni-refresher – pull‑to‑refresh.

uni-calendar – calendar selector.

Example: Pull‑to‑refresh plugin

<template>
  <view>
    <!-- Pull‑to‑refresh component -->
    <uni-refresher @refresh="onRefresh">
      <view v-for="item in list" :key="item.id" class="item">{{ item.title }}</view>
    </uni-refresher>
  </view>
</template>

<script>
export default {
  data() { return { list: [] } },
  onLoad() { this.getData() },
  methods: {
    getData() {
      uni.request({
        url: 'https://jsonplaceholder.typicode.com/posts',
        success: (res) => { this.list = res.data }
      })
    },
    onRefresh() {
      this.list = []
      this.getData()
      setTimeout(() => {
        uni.showToast({ title: 'Refresh successful' })
      }, 1000)
    }
  }
}
</script>

uni‑ui Component Library

One‑minute installation of uni‑ui

Open HBuilderX Plugin Market.

Search for uni‑ui .

Click Import into Project .

The components can be used directly on pages without additional configuration.

High‑frequency components

uni‑card (product or article cards)

<uni-card title="Product Title" sub-title="Subtitle" thumbnail="/static/goods.jpg">
  <view>Card content description</view>
  <button type="primary" size="mini">Buy Now</button>
</uni-card>

uni‑grid (grid navigation for home page)

<uni-grid :column="3">
  <uni-grid-item text="Home" icon="/static/home.png"></uni-grid-item>
  <uni-grid-item text="Category" icon="/static/cate.png"></uni-grid-item>
  <uni-grid-item text="Me" icon="/static/my.png"></uni-grid-item>
</uni-grid>

uni‑forms (login / registration forms)

<uni-forms ref="form" :model="formData" label-width="80rpx">
  <uni-forms-item label="Phone">
    <uni-input v-model="formData.phone" placeholder="Enter phone number"></uni-input>
  </uni-forms-item>
  <uni-forms-item label="Password">
    <uni-input v-model="formData.pwd" password placeholder="Enter password"></uni-input>
  </uni-forms-item>
</uni-forms>
<button type="primary" @click="submit">Login</button>

<script>
export default {
  data() { return { formData: { phone: '', pwd: '' } } }
}
</script>

uni‑load‑more (list load‑more component)

<view v-for="item in list" :key="item.id">{{ item.title }}</view>
<uni-load-more :status="loadingStatus"></uni-load-more>

<script>
export default {
  data() {
    return {
      list: [],
      loadingStatus: 'more' // more / loading / no-more
    }
  },
  onReachBottom() {
    this.loadingStatus = 'loading'
    setTimeout(() => {
      this.loadingStatus = 'no-more'
    }, 1000)
  }
}
</script>

Key rules when using plugins & uni‑ui

After import, use the component directly – no import statements or registration required.

Component properties are taken from the official documentation and copied verbatim.

Components automatically adapt to multiple platforms; no conditional compilation needed.

Styles can be overridden directly for customization.

Common troubleshooting

Import error – Restart HBuilderX and re‑import the plugin.

uni‑ui component not displayed – Verify the import succeeded, then save the page and re‑compile.

Style not applied – Check that the component name is correct.

Event not triggered – Bind events with @, e.g., @refresh or @click.