[保姆级教程]在uniapp中使用vant框架
原创[保姆级教程]在uniapp中使用vant框架
原创
肥晨
发布于 2024-06-22 17:08:08
发布于 2024-06-22 17:08:08
导文
在
uni-app中使用Vant框架，需要遵循几个步骤来确保Vant能够正确地在项目中运行。Vant是一个基于 Vue 的移动端 UI 组件库，它专门为移动端设备设计。虽然uni-app支持多平台，但使用Vant时，主要关注它在移动端的表现。
以下是在 uni-app 中使用 Vant 的步骤：
安装 Vant
在你的 uni-app 项目根目录下，使用 npm 或 yarn 来安装 Vant。
使用 npm:
npm install vant --save
//或者
npm i @vant/weapp -S --production
或使用 yarn:
yarn add vant在uniapp项目中的pages.json中配置easycom，实现组件的自动按需引入：
{
"easycom": {
"autoscan": true,
"custom": {
"^van-(.*)": "@vant/weapp/dist/$1/index"
}
}
}在页面中使用Vant Weapp组件，例如使用按钮组件（Button）：
<template>
<view>
<van-button type="primary">按钮</van-button>
</view>
</template>确保你的uniapp项目支持npm以及小程序的分包加载机制。如果遇到问题，检查是否按照Vant Weapp的文档进行了相应的配置。
其他
安装报错
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
您好，我是肥晨。 欢迎关注我获取前端学习资源，日常分享技术变革，生存法则；行业内幕，洞察先机。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
评论
登录后参与评论
推荐阅读