vant引入

### 如何在 UniApp 中集成 Vant UI 组件库 #### 安装依赖包 为了能够在 UniApp 项目中使用 Vant 组件库，需先通过 npm 或 yarn 来安装 `vant` 和其样式文件。 ```bash npm install vant@latest --save ``` 或者如果更倾向于使用 yarn： ```bash yarn add vant@latest ``` 此操作将会下载最新版本的 Vant 并将其保存至项目的 package.json 文件中的 dependencies 字段里[^1]。 #### 配置 main.js 接着，在项目的入口文件 `main.js` 中全局注册 Vant 的按需加载插件。这有助于减少打包后的体积并提高应用启动速度。 ```javascript import { createApp } from 'vue'; import App from './App.vue'; // 引入 Vant 按需加载工具函数 import { Lazyload, Toast } from 'vant'; const app = createApp(App); app.use(Lazyload); app.use(Toast); app.mount('#app'); ``` 注意这里只作为例子展示了懒加载图片组件 (Lazyload) 及提示框组件 (Toast)，实际可根据需求自行调整要使用的具体组件列表。 #### 修改 pages.json 对于某些特定平台（如微信小程序），还需要修改页面配置文件 `pages.json` ，以确保正确解析来自 Vant 的自定义标签名。 ```json { "usingComponents": { "van-button": "@vant/weapp/button/index" } } ``` 上述 JSON 片段表示当遇到 `<van-button>` 这样的 HTML 标签时，应该去查找对应的小程序端路径下的 button 实现。 #### 编写页面代码 最后就可以像下面这样编写 .vue 页面模板来利用已引入的 Vant 组件了: ```html <template> <view class="example"> <!-- 使用 van-button --> <van-button type="primary">主要按钮</van-button> <!-- 更多其他组件... --> </view> </template> <script setup lang="ts"></script> <style scoped></style> ``` 以上就是完整的在 UniApp 中集成 Vant UI 组件库的方法介绍。