[保姆级教程]在uniapp中使用vant框架

文章目录


导文

uni-app 中使用 Vant 框架,需要遵循几个步骤来确保 Vant 能够正确地在项目中运行。Vant 是一个基于 Vue 的移动端 UI 组件库,它专门为移动端设备设计。虽然 uni-app 支持多平台,但使用 Vant 时,主要关注它在移动端的表现。

以下是在 uni-app 中使用 Vant 的步骤:

安装 Vant

在你的 uni-app 项目根目录下,使用 npm 或 yarn 来安装 Vant

使用 npm:

bash 复制代码
npm install vant --save
//或者
npm i @vant/weapp -S --production

或使用 yarn:

bash 复制代码
yarn add vant

在uniapp项目中的pages.json中配置easycom,实现组件的自动按需引入:

bash 复制代码
{
  "easycom": {
    "autoscan": true,
    "custom": {
      "^van-(.*)": "@vant/weapp/dist/$1/index"
    }
  }
}

在页面中使用Vant Weapp组件,例如使用按钮组件(Button):

bash 复制代码
<template>
  <view>
    <van-button type="primary">按钮</van-button>
  </view>
</template>

确保你的uniapp项目支持npm以及小程序的分包加载机制。如果遇到问题,检查是否按照Vant Weapp的文档进行了相应的配置。

其他

安装报错

dart 复制代码
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: myuniappsa@0.1.0
npm ERR! Found: vue@2.6.14
npm ERR! node_modules/vue
npm ERR!   vue@">= 2.6.14 < 2.7" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer vue@"^3.0.0" from vant@4.9.1
npm ERR! node_modules/vant
npm ERR!   vant@"*" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR! See C:\Users\Administrator\AppData\Local\npm-cache\eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\Administrator\AppData\Local\npm-cache\_logs\2024-06-21T03_57_27_712Z-debug-0.log

原因:版本导致的

解决方法:切换npm版本 或者 uniapp版本 或者vant版本

官网地址

http://mui.ucmed.cn/#/zh-CN/quickstart

您好,我是肥晨。

欢迎关注我获取前端学习资源,日常分享技术变革,生存法则;行业内幕,洞察先机。

相关推荐
小徐_23332 天前
uni-app vue3 也能使用 Echarts?Wot Starter 是这样做的!
前端·uni-app·echarts
iOS阿玮2 天前
永远不要站在用户的对立面,挑战大众的公知。
uni-app·app·apple
xw52 天前
uni-app中v-if使用”异常”
前端·uni-app
!win !2 天前
uni-app中v-if使用”异常”
前端·uni-app
2501_915918412 天前
iOS 上架全流程指南 iOS 应用发布步骤、App Store 上架流程、uni-app 打包上传 ipa 与审核实战经验分享
android·ios·小程序·uni-app·cocoa·iphone·webview
00后程序员张2 天前
iOS App 混淆与加固对比 源码混淆与ipa文件混淆的区别、iOS代码保护与应用安全场景最佳实践
android·安全·ios·小程序·uni-app·iphone·webview
00后程序员张2 天前
详细解析苹果iOS应用上架到App Store的完整步骤与指南
android·ios·小程序·https·uni-app·iphone·webview
海绵宝宝不喜欢侬2 天前
uniapp-微信小程序分享功能-onShareAppMessage
微信小程序·小程序·uni-app
2501_915106322 天前
Xcode 上传 ipa 全流程详解 App Store 上架流程、uni-app 生成 ipa 文件上传与审核指南
android·macos·ios·小程序·uni-app·iphone·xcode
xkxnq2 天前
Uniapp崩溃监控体系构建:内存泄漏三维定位法(堆栈/资源/线程)
uni-app