5.在项目中引入vant组件库

推荐使用vant组件库：

https://vant3.uihtm.com/#/zh-CN/quickstart

1. Vue 3 项目，安装最新版 vant 

npm i vant

2. 在非 vite 项目中按需引入组件（推荐）

在非 vite 的项目中，可以通过 babel 插件来实现按需引入组件。我们需要安装babel-plugin-import​插件，它会在编译过程中将import语句自动转换为按需引入的方式。

a.安装插件

npm i babel-plugin-import -D

b.在babel.config.js中配置插件.

{
  "plugins": [
    [
      "import",
      {
        "libraryName": "vant",
        "libraryDirectory": "es",
        "style": true
      }
    ]
  ]
}

c.在main.js中引入组件，完整代码如下

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import { Button } from 'vant'

const app=createApp(App)

app.use(Button) // 改变配置文件后重启项目
app.use(store)
app.use(router).mount('#app')

3. 在home文件夹下创建TopSwpier.vue文件，完成代码编写，可自行选一个按钮尝试

https://vant3.uihtm.com/#/zh-CN/button