diff --git a/packages/uni-cli-shared/components/unicloud-db.vue b/packages/uni-cli-shared/components/unicloud-db.vue
new file mode 100644
index 0000000000000000000000000000000000000000..2e7497c43121d538ebcdc4577b9919a93d7891d7
--- /dev/null
+++ b/packages/uni-cli-shared/components/unicloud-db.vue
@@ -0,0 +1,383 @@
+<template>
+  <view>
+    <slot
+      :options="options"
+      :data="dataList"
+      :pagination="paginationInternal"
+      :loading="loading"
+      :error="errorMessage"
+    />
+  </view>
+</template>
+
+<script>
+const events = {
+  load: 'load',
+  error: 'error'
+}
+const pageMode = {
+  add: 'add',
+  replace: 'replace'
+}
+
+const attrs = [
+  'pageCurrent',
+  'pageSize',
+  'collection',
+  'action',
+  'field',
+  'getcount',
+  'orderby',
+  'where'
+]
+
+export default {
+  name: 'UniClouddb',
+  props: {
+    options: {
+      type: [Object, Array],
+      default () {
+        return {}
+      }
+    },
+    collection: {
+      type: String,
+      default: ''
+    },
+    action: {
+      type: String,
+      default: ''
+    },
+    field: {
+      type: String,
+      default: ''
+    },
+    pageData: {
+      type: String,
+      default: 'add'
+    },
+    pageCurrent: {
+      type: Number,
+      default: 1
+    },
+    pageSize: {
+      type: Number,
+      default: 20
+    },
+    getcount: {
+      type: [Boolean, String],
+      default: false
+    },
+    orderby: {
+      type: String,
+      default: ''
+    },
+    where: {
+      type: [String, Object],
+      default: ''
+    },
+    getone: {
+      type: [Boolean, String],
+      default: false
+    },
+    manual: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data () {
+    return {
+      loading: false,
+      dataList: this.getone ? {} : [],
+      paginationInternal: {
+        current: this.pageCurrent,
+        size: this.pageSize,
+        count: 0
+      },
+      errorMessage: ''
+    }
+  },
+  created () {
+    this._isEnded = false
+
+    this.$watch(() => {
+      var al = []
+      attrs.forEach(key => {
+        al.push(this[key])
+      })
+      return al
+    }, (newValue, oldValue) => {
+      this.paginationInternal.pageSize = this.pageSize
+
+      let needReset = false
+      for (let i = 2; i < newValue.length; i++) {
+        if (newValue[i] !== oldValue[i]) {
+          needReset = true
+          break
+        }
+      }
+      if (needReset) {
+        this.clear()
+        this.reset()
+      }
+      if (newValue[0] !== oldValue[0]) {
+        this.paginationInternal.current = this.pageCurrent
+      }
+
+      this._execLoadData()
+    })
+
+    // #ifdef H5
+    if (process.env.NODE_ENV === 'development') {
+      this._debugDataList = []
+      if (!window.unidev) {
+        window.unidev = {
+          clientDB: {
+            data: []
+          }
+        }
+      }
+      window.unidev.clientDB.data.push(this._debugDataList)
+    }
+    // #endif
+
+    // #ifdef MP-TOUTIAO
+    let changeName
+    const events = this.$scope.dataset.eventOpts
+    for (var i = 0; i < events.length; i++) {
+      const event = events[i]
+      if (event[0].includes('^load')) {
+        changeName = event[1][0][0]
+      }
+    }
+    if (changeName) {
+      let parent = this.$parent
+      let maxDepth = 16
+      this._changeDataFunction = null
+      while (parent && maxDepth > 0) {
+        const fun = parent[changeName]
+        if (fun && typeof fun === 'function') {
+          this._changeDataFunction = fun
+          maxDepth = 0
+          break
+        }
+        parent = parent.$parent
+        maxDepth--
+      }
+    }
+    // #endif
+
+    if (!this.manual) {
+      this.loadData()
+    }
+  },
+  // #ifdef H5
+  beforeDestroy () {
+    if (process.env.NODE_ENV === 'development' && window.unidev) {
+      var cd = this._debugDataList
+      var dl = window.unidev.clientDB.data
+      for (var i = dl.length - 1; i >= 0; i--) {
+        if (dl[i] === cd) {
+          dl.splice(i, 1)
+          break
+        }
+      }
+    }
+  },
+  // #endif
+  methods: {
+    loadData (args1, args2) {
+      let callback = null
+      if (typeof args1 === 'object') {
+        if (args1.clear) {
+          this.clear()
+          this.reset()
+        }
+        if (args1.current !== undefined) {
+          this.paginationInternal.current = args1.current
+        }
+        if (typeof args2 === 'function') {
+          callback = args2
+        }
+      } else if (typeof args1 === 'function') {
+        callback = args1
+      }
+
+      this._execLoadData(callback)
+    },
+    loadMore () {
+      if (this._isEnded) {
+        return
+      }
+      this._execLoadData()
+    },
+    refresh () {
+      this.clear()
+      this._execLoadData()
+    },
+    clear () {
+      this._isEnded = false
+      this.dataList = []
+    },
+    reset () {
+      this.paginationInternal.current = 1
+    },
+    remove (id, {
+      action,
+      callback,
+      confirmTitle,
+      confirmContent
+    } = {}) {
+      if (!id || !id.length) {
+        return
+      }
+      uni.showModal({
+        title: confirmTitle || '提示',
+        content: confirmContent || '是否删除该数据',
+        showCancel: true,
+        success: (res) => {
+          if (!res.confirm) {
+            return
+          }
+          this._execRemove(id, action, callback)
+        }
+      })
+    },
+    _execLoadData (callback) {
+      if (this.loading) {
+        return
+      }
+      this.loading = true
+      this.errorMessage = ''
+
+      this._getExec().then((res) => {
+        this.loading = false
+        const {
+          data,
+          count
+        } = res.result
+        this._isEnded = data.length < this.pageSize
+
+        callback && callback(data, this._isEnded)
+        this._dispatchEvent(events.load, data)
+
+        if (this.getone) {
+          this.dataList = data.length ? data[0] : undefined
+        } else if (this.pageData === pageMode.add) {
+          this.dataList.push(...data)
+          if (this.dataList.length) {
+            this.paginationInternal.current++
+          }
+        } else if (this.pageData === pageMode.replace) {
+          this.dataList = data
+        }
+
+        if (this.getcount) {
+          this.paginationInternal.count = count
+        }
+
+        // #ifdef H5
+        if (process.env.NODE_ENV === 'development') {
+          this._debugDataList.length = 0
+          this._debugDataList.push(...JSON.parse(JSON.stringify(this.dataList)))
+        }
+        // #endif
+      }).catch((err) => {
+        this.loading = false
+        this.errorMessage = err
+        callback && callback()
+        this.$emit(events.error, err)
+      })
+    },
+    _getExec () {
+      /* eslint-disable no-undef */
+      let db = uniCloud.database()
+
+      if (this.action) {
+        db = db.action(this.action)
+      }
+
+      db = db.collection(this.collection)
+
+      if (!(!this.where || !Object.keys(this.where).length)) {
+        db = db.where(this.where)
+      }
+      if (this.field) {
+        db = db.field(this.field)
+      }
+      if (this.orderby) {
+        db = db.orderBy(this.orderby)
+      }
+
+      const {
+        current,
+        size
+      } = this.paginationInternal
+      db = db.skip(size * (current - 1)).limit(size).get({
+        getCount: this.getcount
+      })
+
+      return db
+    },
+    _execRemove (id, action, callback) {
+      if (!this.collection || !id) {
+        return
+      }
+
+      const ids = Array.isArray(id) ? id : [id]
+      if (!ids.length) {
+        return
+      }
+
+      uni.showLoading({
+        mask: true
+      })
+
+      /* eslint-disable no-undef */
+      const db = uniCloud.database()
+      const dbCmd = db.command
+
+      let exec = db
+      if (action) {
+        exec = exec.action(action)
+      }
+
+      exec.collection(this.collection).where({
+        _id: dbCmd.in(ids)
+      }).remove().then((res) => {
+        callback && callback(res.result)
+        if (this.pageData === pageMode.replace) {
+          this.refresh()
+        } else {
+          this.removeData(ids)
+        }
+      }).catch((err) => {
+        uni.showModal({
+          content: err.message,
+          showCancel: false
+        })
+      }).finally(() => {
+        uni.hideLoading()
+      })
+    },
+    removeData (ids) {
+      const il = ids.slice(0)
+      const dl = this.dataList
+      for (let i = dl.length - 1; i >= 0; i--) {
+        const index = il.indexOf(dl[i]._id)
+        if (index >= 0) {
+          dl.splice(i, 1)
+          il.splice(index, 1)
+        }
+      }
+    },
+    _dispatchEvent (type, data) {
+      if (this._changeDataFunction) {
+        this._changeDataFunction(data, this._isEnded)
+      } else {
+        this.$emit(type, data, this._isEnded)
+      }
+    }
+  }
+}
+</script>
diff --git a/packages/uni-cli-shared/lib/pages.js b/packages/uni-cli-shared/lib/pages.js
index daa4455ec83053fe71d471abc0df8b8b2b1746de..a450c3fa99c6bd0852ff353f4dca8eea5db1f800 100644
--- a/packages/uni-cli-shared/lib/pages.js
+++ b/packages/uni-cli-shared/lib/pages.js
@@ -504,7 +504,7 @@ function parseUsingAutoImportComponents (usingAutoImportComponents) {
   return autoImportComponents
 }
 
-const BUILT_IN_COMPONENTS = ['page-meta', 'navigation-bar', 'uni-match-media']
+const BUILT_IN_COMPONENTS = ['page-meta', 'navigation-bar', 'uni-match-media', 'unicloud-db']
 
 function isBuiltInComponent (name) {
   return BUILT_IN_COMPONENTS.includes(name)