引入vant 组件库

package-lock.json

@@ -9,6 +9,7 @@
       "version": "0.0.0",
       "dependencies": {
         "pinia": "^2.3.0",
+        "vant": "^4.9.16",
         "vue": "^3.5.13",
         "vue-router": "^4.5.0"
       },
@@ -1394,6 +1395,21 @@
         "undici-types": "~6.20.0"
       }
     },
+    "node_modules/@vant/popperjs": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmmirror.com/@vant/popperjs/-/popperjs-1.3.0.tgz",
+      "integrity": "sha512-hB+czUG+aHtjhaEmCJDuXOep0YTZjdlRR+4MSmIFnkCQIxJaXLQdSsR90XWvAI2yvKUI7TCGqR8pQg2RtvkMHw==",
+      "license": "MIT"
+    },
+    "node_modules/@vant/use": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmmirror.com/@vant/use/-/use-1.6.0.tgz",
+      "integrity": "sha512-PHHxeAASgiOpSmMjceweIrv2AxDZIkWXyaczksMoWvKV2YAYEhoizRuk/xFnKF+emUIi46TsQ+rvlm/t2BBCfA==",
+      "license": "MIT",
+      "peerDependencies": {
+        "vue": "^3.0.0"
+      }
+    },
     "node_modules/@vitejs/plugin-vue": {
       "version": "5.2.1",
       "resolved": "https://registry.npmmirror.com/@vitejs/plugin-vue/-/plugin-vue-5.2.1.tgz",
@@ -4128,6 +4144,20 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/vant": {
+      "version": "4.9.16",
+      "resolved": "https://registry.npmmirror.com/vant/-/vant-4.9.16.tgz",
+      "integrity": "sha512-QkcxoV7MOiV+fakCPF8z/czarW42BeR0k79U9KNuM2xZs8q3YhhPxBDdrcoQ64OWIkdf5alEYeDWCuDYfiyR3g==",
+      "license": "MIT",
+      "dependencies": {
+        "@vant/popperjs": "^1.3.0",
+        "@vant/use": "^1.6.0",
+        "@vue/shared": "^3.5.13"
+      },
+      "peerDependencies": {
+        "vue": "^3.0.0"
+      }
+    },
     "node_modules/vite": {
       "version": "6.0.10",
       "resolved": "https://registry.npmmirror.com/vite/-/vite-6.0.10.tgz",

package.json

@@ -12,6 +12,7 @@
   },
   "dependencies": {
     "pinia": "^2.3.0",
+    "vant": "^4.9.16",
     "vue": "^3.5.13",
     "vue-router": "^4.5.0"
   },

src/components/HelloWorld.vue

@@ -1,7 +1,12 @@
 <script setup lang="ts">
+import { ref } from 'vue';
+import { showToast } from 'vant';
+
 defineProps<{
   msg: string
 }>()
+const value = ref<number>(50)
+const onChange = (value:number) => showToast('当前值：' + value);
 </script>
 
 <template>
@@ -12,10 +17,17 @@ defineProps<{
       <a href="https://vite.dev/" target="_blank" rel="noopener">Vite</a> +
       <a href="https://vuejs.org/" target="_blank" rel="noopener">Vue 3</a>. What's next?
     </h3>
+    <span class="text-lg font-medium">{{ value }}</span>
+    <van-slider class="my-8" :step="0.5" v-model="value" @change="onChange" />
   </div>
 </template>
 
 <style scoped>
+.greetings {
+  --van-slider-bar-height: 6px;
+  --van-slider-button-width: 32px;
+  --van-slider-button-height: 32px;
+}
 h1 {
   font-weight: 500;
   font-size: 2.6rem;

src/main.ts

@@ -3,13 +3,15 @@ import './assets/main.css'
 
 import { createApp } from 'vue'
 import { createPinia } from 'pinia'
-
+import Vant from 'vant'
 import App from './App.vue'
 import router from './router'
+import 'vant/lib/index.css';
 
 const app = createApp(App)
 
 app.use(createPinia())
 app.use(router)
+app.use(Vant);
 
 app.mount('#app')