diff --git a/package.json b/package.json
index 933502e..d7b89f6 100644
--- a/package.json
+++ b/package.json
@@ -73,6 +73,7 @@
     "@dcloudio/uni-mp-toutiao": "3.0.0-3081220230817001",
     "@dcloudio/uni-mp-weixin": "3.0.0-3081220230817001",
     "@dcloudio/uni-quickapp-webview": "3.0.0-3081220230817001",
+    "@dcloudio/uni-ui": "^1.4.28",
     "dayjs": "^1.11.10",
     "pinia": "^2.0.36",
     "pinia-plugin-persistedstate": "^3.2.1",
@@ -92,6 +93,7 @@
     "@typescript-eslint/eslint-plugin": "^6.15.0",
     "@typescript-eslint/parser": "^6.15.0",
     "@uni-helper/uni-app-types": "^0.5.12",
+    "@uni-helper/uni-ui-types": "^0.5.11",
     "@uni-helper/unocss-preset-uni": "^0.2.5",
     "@uni-helper/vite-plugin-uni-layouts": "^0.1.7",
     "@uni-helper/vite-plugin-uni-pages": "^0.2.12",
diff --git a/pages.config.ts b/pages.config.ts
index e80787f..42876f9 100644
--- a/pages.config.ts
+++ b/pages.config.ts
@@ -8,4 +8,11 @@ export default defineUniPages({
     navigationBarTextStyle: 'black',
     navigationBarTitleText: 'vue3-uniapp',
   },
+  easycom: {
+    autoscan: true,
+    custom: {
+      // uni-ui 规则如下配置
+      '^uni-(.*)': '@dcloudio/uni-ui/lib/uni-$1/uni-$1.vue',
+    },
+  },
 })
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 1229be0..99faa23 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -44,6 +44,9 @@ dependencies:
   '@dcloudio/uni-quickapp-webview':
     specifier: 3.0.0-3081220230817001
     version: 3.0.0-3081220230817001(postcss@8.4.32)(vue@3.2.47)
+  '@dcloudio/uni-ui':
+    specifier: ^1.4.28
+    version: 1.4.28
   dayjs:
     specifier: ^1.11.10
     version: 1.11.10
@@ -97,6 +100,9 @@ devDependencies:
   '@uni-helper/uni-app-types':
     specifier: ^0.5.12
     version: 0.5.12(typescript@4.9.5)
+  '@uni-helper/uni-ui-types':
+    specifier: ^0.5.11
+    version: 0.5.11(@uni-helper/uni-app-types@0.5.12)
   '@uni-helper/unocss-preset-uni':
     specifier: ^0.2.5
     version: 0.2.5(eslint-import-resolver-typescript@3.6.1)(postcss@8.4.32)(typescript@4.9.5)(vite@4.1.4)
@@ -2194,6 +2200,10 @@ packages:
       - vue
     dev: false
 
+  /@dcloudio/uni-ui@1.4.28:
+    resolution: {integrity: sha512-e/lSbvR79KH9+d3D4ueNbvD6szigjO/5IyjBNmiTqaj0PTS324fBV3L6f3s1qpkYonM4rdOl000hVOcAg6Gh/A==}
+    dev: false
+
   /@dcloudio/vite-plugin-uni@3.0.0-3081220230817001(postcss@8.4.32)(vite@4.1.4)(vue@3.2.47):
     resolution: {integrity: sha512-dLeqqyrNNUBTZfI0ppPk4YoD+DBI0gJLeTjpN6bK5i3nFKkju9g2K6IWl62YMObjTiXwQF8qAEDb+fyWoe4Ksw==}
     engines: {node: ^14.18.0 || >=16.0.0}
@@ -3896,6 +3906,20 @@ packages:
       - vitest
     dev: true
 
+  /@uni-helper/uni-ui-types@0.5.11(@uni-helper/uni-app-types@0.5.12):
+    resolution: {integrity: sha512-tGX4llyJBdq9TmNjmZYKu4eueUWUU0F/YgZeTWDgVCmlgYGavhcUL7R+I0Uxe5hGoqFXkNf0ZnmG/WFZWfK/HQ==}
+    engines: {node: '>=14.18'}
+    peerDependencies:
+      '@uni-helper/uni-app-types': ^0.5.1
+    peerDependenciesMeta:
+      '@uni-helper/uni-app-types':
+        optional: true
+    dependencies:
+      '@dcloudio/types': 3.4.3
+      '@uni-helper/uni-app-types': 0.5.12(typescript@4.9.5)
+      vue3: /vue@3.2.47
+    dev: true
+
   /@uni-helper/unocss-preset-uni@0.2.5(eslint-import-resolver-typescript@3.6.1)(postcss@8.4.32)(typescript@4.9.5)(vite@4.1.4):
     resolution: {integrity: sha512-Lhh/Eo6vRhflcf7lmx1vQ6sOL7nB9YDqy+zJ9MOJd2MWV9AYxFBfHRV6in2THRl2YUA2HO8wg/NdP7pabk/MlQ==}
     requiresBuild: true
diff --git a/src/pages.json b/src/pages.json
index daaf0d1..7ad2414 100644
--- a/src/pages.json
+++ b/src/pages.json
@@ -13,5 +13,11 @@
     "navigationBarTextStyle": "black",
     "navigationBarTitleText": "vue3-uniapp"
   },
+  "easycom": {
+    "autoscan": true,
+    "custom": {
+      "^uni-(.*)": "@dcloudio/uni-ui/lib/uni-$1/uni-$1.vue"
+    }
+  },
   "subPackages": []
 }
diff --git a/src/pages/index/index.vue b/src/pages/index/index.vue
index 96941b2..2df04c7 100644
--- a/src/pages/index/index.vue
+++ b/src/pages/index/index.vue
@@ -12,6 +12,8 @@
       Demo Count: {{ countStore.count }}
       <button class="ml-2" @click="countStore.increment">新增</button>
     </view>
+    <uni-icons type="contact" size="30"></uni-icons>
+    <uni-badge text="1"></uni-badge>
     <!-- Sun in light mode, Moon in dark mode, from Carbon -->
     <button class="i-carbon-sun dark:i-carbon-moon" />
   </view>
diff --git a/tsconfig.json b/tsconfig.json
index 6a82df5..d8448b0 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -11,7 +11,12 @@
       "@/*": ["./src/*"]
     },
     "lib": ["esnext", "dom"],
-    "types": ["@dcloudio/types", "@types/wechat-miniprogram", "@uni-helper/uni-app-types"]
+    "types": [
+      "@dcloudio/types",
+      "@types/wechat-miniprogram",
+      "@uni-helper/uni-app-types",
+      "@uni-helper/uni-ui-types"
+    ]
   },
   "vueCompilerOptions": {
     "nativeTags": ["block", "template", "component", "slot"]