diff --git a/package-lock.json b/package-lock.json
index 96c18f0..3f35520 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,6 +8,7 @@
       "name": "andon_app",
       "version": "0.0.0",
       "dependencies": {
+        "vant": "^3.4.3",
         "vue": "^3.4.21",
         "vue-router": "^4.3.3"
       },
@@ -826,6 +827,24 @@
         "undici-types": "~5.26.4"
       }
     },
+    "node_modules/@vant/icons": {
+      "version": "1.8.0",
+      "resolved": "https://registry.npmjs.org/@vant/icons/-/icons-1.8.0.tgz",
+      "integrity": "sha512-sKfEUo2/CkQFuERxvkuF6mGQZDKu3IQdj5rV9Fm0weJXtchDSSQ+zt8qPCNUEhh9Y8shy5PzxbvAfOOkCwlCXg=="
+    },
+    "node_modules/@vant/popperjs": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/@vant/popperjs/-/popperjs-1.3.0.tgz",
+      "integrity": "sha512-hB+czUG+aHtjhaEmCJDuXOep0YTZjdlRR+4MSmIFnkCQIxJaXLQdSsR90XWvAI2yvKUI7TCGqR8pQg2RtvkMHw=="
+    },
+    "node_modules/@vant/use": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/@vant/use/-/use-1.6.0.tgz",
+      "integrity": "sha512-PHHxeAASgiOpSmMjceweIrv2AxDZIkWXyaczksMoWvKV2YAYEhoizRuk/xFnKF+emUIi46TsQ+rvlm/t2BBCfA==",
+      "peerDependencies": {
+        "vue": "^3.0.0"
+      }
+    },
     "node_modules/@vitejs/plugin-vue": {
       "version": "5.0.5",
       "resolved": "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-5.0.5.tgz",
@@ -2406,6 +2425,19 @@
       "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==",
       "dev": true
     },
+    "node_modules/vant": {
+      "version": "3.4.3",
+      "resolved": "https://registry.npmjs.org/vant/-/vant-3.4.3.tgz",
+      "integrity": "sha512-vkOgMspRxqhTwX6huPjEiWgTDULZZVVVv2IaAeyXq21heKIJazv2Nymolhzmk4Ar/ZFfoxC/yOeG7MhnhTbrew==",
+      "dependencies": {
+        "@vant/icons": "^1.7.1",
+        "@vant/popperjs": "^1.1.0",
+        "@vant/use": "^1.3.5"
+      },
+      "peerDependencies": {
+        "vue": "^3.0.0"
+      }
+    },
     "node_modules/vite": {
       "version": "5.3.1",
       "resolved": "https://registry.npmjs.org/vite/-/vite-5.3.1.tgz",
@@ -3085,6 +3117,22 @@
         "undici-types": "~5.26.4"
       }
     },
+    "@vant/icons": {
+      "version": "1.8.0",
+      "resolved": "https://registry.npmjs.org/@vant/icons/-/icons-1.8.0.tgz",
+      "integrity": "sha512-sKfEUo2/CkQFuERxvkuF6mGQZDKu3IQdj5rV9Fm0weJXtchDSSQ+zt8qPCNUEhh9Y8shy5PzxbvAfOOkCwlCXg=="
+    },
+    "@vant/popperjs": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/@vant/popperjs/-/popperjs-1.3.0.tgz",
+      "integrity": "sha512-hB+czUG+aHtjhaEmCJDuXOep0YTZjdlRR+4MSmIFnkCQIxJaXLQdSsR90XWvAI2yvKUI7TCGqR8pQg2RtvkMHw=="
+    },
+    "@vant/use": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/@vant/use/-/use-1.6.0.tgz",
+      "integrity": "sha512-PHHxeAASgiOpSmMjceweIrv2AxDZIkWXyaczksMoWvKV2YAYEhoizRuk/xFnKF+emUIi46TsQ+rvlm/t2BBCfA==",
+      "requires": {}
+    },
     "@vitejs/plugin-vue": {
       "version": "5.0.5",
       "resolved": "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-5.0.5.tgz",
@@ -4222,6 +4270,16 @@
       "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==",
       "dev": true
     },
+    "vant": {
+      "version": "3.4.3",
+      "resolved": "https://registry.npmjs.org/vant/-/vant-3.4.3.tgz",
+      "integrity": "sha512-vkOgMspRxqhTwX6huPjEiWgTDULZZVVVv2IaAeyXq21heKIJazv2Nymolhzmk4Ar/ZFfoxC/yOeG7MhnhTbrew==",
+      "requires": {
+        "@vant/icons": "^1.7.1",
+        "@vant/popperjs": "^1.1.0",
+        "@vant/use": "^1.3.5"
+      }
+    },
     "vite": {
       "version": "5.3.1",
       "resolved": "https://registry.npmjs.org/vite/-/vite-5.3.1.tgz",
diff --git a/package.json b/package.json
index 40885dd..0ec623b 100644
--- a/package.json
+++ b/package.json
@@ -9,6 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "vant": "^3.4.3",
     "vue": "^3.4.21",
     "vue-router": "^4.3.3"
   },
diff --git a/src/components/HelloWorld.vue b/src/components/HelloWorld.vue
index f17e008..83a926b 100644
--- a/src/components/HelloWorld.vue
+++ b/src/components/HelloWorld.vue
@@ -1,12 +1,9 @@
-<script setup lang="ts">
-import { ref } from 'vue'
-
-defineProps<{ msg: string }>()
-
-const count = ref(0)
-</script>
-
 <template>
+  <van-button>默认按钮</van-button>
+  <van-button type="primary">主要按钮</van-button>
+  <van-button type="info">信息按钮</van-button>
+  <van-button type="warning">警告按钮</van-button>
+  <van-button type="danger">危险按钮</van-button>
   <h1>dhfqdjkfadskfak</h1>
   <h1>{{ msg }}</h1>
 
@@ -31,6 +28,13 @@ const count = ref(0)
   </p>
   <p class="read-the-docs">Click on the Vite and Vue logos to learn more</p>
 </template>
+<script setup lang="ts">
+import { ref } from "vue";
+
+defineProps<{ msg: string }>();
+
+const count = ref(0);
+</script>
 
 <style scoped>
 .read-the-docs {
diff --git a/src/main.ts b/src/main.ts
index 157fe3a..8d8474c 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -2,8 +2,9 @@ import { createApp } from 'vue'
 import './style.css'
 import App from './App.vue'
 import router from './router'
-
+import Vant from 'vant';
+import 'vant/lib/index.css';
 const app = createApp(App);
-app.use(router).mount('#app')
+app.use(router).use(Vant).mount('#app')