当前位置: 首页 > news >正文

uni-app小程序使用vant

步骤一:安装 Vant Weapp

# 通过 npm 安装
npm i @vant/weapp -S --production# 通过 yarn 安装
yarn add @vant/weapp --production# 安装 0.x 版本
npm i vant-weapp -S --production

步骤二:在根目录下创建“wxcomponents”文件夹

步骤三:找到依赖node_modules/@vant/weapp/dist,复制dist文件

在这里插入图片描述

步骤四:把刚刚复制的dist文件粘贴到刚刚新建的“wxcomponents”文件下同时将dist改名为vant

在这里插入图片描述

步骤五:在“pages.json”/“globalStyle”里配置“usingComponents”

"globalStyle": {"navigationBarTextStyle": "black","navigationBarTitleText": "uni-app","navigationBarBackgroundColor": "#F8F8F8","backgroundColor": "#F8F8F8","usingComponents": {"van-action-sheet": "/wxcomponents/vant/action-sheet/index","van-area": "/wxcomponents/vant/area/index","van-button": "/wxcomponents/vant/button/index","van-card": "/wxcomponents/vant/card/index","van-cell": "/wxcomponents/vant/cell/index","van-cell-group": "/wxcomponents/vant/cell-group/index","van-checkbox": "/wxcomponents/vant/checkbox/index","van-checkbox-group": "/wxcomponents/vant/checkbox-group/index","van-col": "/wxcomponents/vant/col/index","van-dialog": "/wxcomponents/vant/dialog/index","van-field": "/wxcomponents/vant/field/index","van-goods-action": "/wxcomponents/vant/goods-action/index","van-goods-action-icon": "/wxcomponents/vant/goods-action-icon/index","van-goods-action-button": "/wxcomponents/vant/goods-action-button/index","van-icon": "/wxcomponents/vant/icon/index","van-loading": "/wxcomponents/vant/loading/index","van-nav-bar": "/wxcomponents/vant/nav-bar/index","van-notice-bar": "/wxcomponents/vant/notice-bar/index","van-notify": "/wxcomponents/vant/notify/index","van-panel": "/wxcomponents/vant/panel/index","van-popup": "/wxcomponents/vant/popup/index","van-progress": "/wxcomponents/vant/progress/index","van-radio": "/wxcomponents/vant/radio/index","van-radio-group": "/wxcomponents/vant/radio-group/index","van-row": "/wxcomponents/vant/row/index","van-search": "/wxcomponents/vant/search/index","van-slider": "/wxcomponents/vant/slider/index","van-stepper": "/wxcomponents/vant/stepper/index","van-steps": "/wxcomponents/vant/steps/index","van-submit-bar": "/wxcomponents/vant/submit-bar/index","van-swipe-cell": "/wxcomponents/vant/swipe-cell/index","van-switch": "/wxcomponents/vant/switch/index","van-tab": "/wxcomponents/vant/tab/index","van-tabs": "/wxcomponents/vant/tabs/index","van-tabbar": "/wxcomponents/vant/tabbar/index","van-tabbar-item": "/wxcomponents/vant/tabbar-item/index","van-tag": "/wxcomponents/vant/tag/index","van-toast": "/wxcomponents/vant/toast/index","van-transition": "/wxcomponents/vant/transition/index","van-tree-select": "/wxcomponents/vant/tree-select/index","van-datetime-picker": "/wxcomponents/vant/datetime-picker/index","van-rate": "/wxcomponents/vant/rate/index","van-collapse": "/wxcomponents/vant/collapse/index","van-collapse-item": "/wxcomponents/vant/collapse-item/index","van-picker": "/wxcomponents/vant/picker/index","van-empty": "/wxcomponents/vant/empty/index"}},

步骤六:使用

<van-button type="default">默认按钮</van-button>
<van-button type="primary">主要按钮</van-button>
<van-button type="info">信息按钮</van-button>
<van-button type="warning">警告按钮</van-button>
<van-button type="danger">危险按钮</van-button>

end~~~

如有错误或观点不一致的请评论留言共同讨论,本人前端小白一枚,根据自己实际项目遇到的问题进行总结分享,谢谢大家的阅读!

http://www.lryc.cn/news/219961.html

相关文章:

  • C-DS二叉树_另一棵树的子树
  • 祝贺璞华大数据产品入选中国信通院“铸基计划”
  • WebDAV之π-Disk派盘 + MiXplorer
  • java依赖的jar包下载
  • 苹果加大对印度的扶持,提高在其生产iphone的比重
  • 【漏洞复现】typecho_v1.0-14.10.10_unserialize
  • Linux常见面试题
  • HarmonyOS ArkTS基础知识
  • 嵌入式课后习题第一章解答
  • postMessage
  • 挑战100天 AI In LeetCode Day01(1)
  • 大数据疫情分析及可视化系统 计算机竞赛
  • uniapp调起拨打手机号
  • nacos配置中心docker部署、配置及 goLang 集成使用
  • PubDef:使用公共模型防御迁移攻击
  • 【QT5之QFtp模块】编译及使用
  • 数据结构 编程1年新手视角的平衡二叉树AVL从C与C++实现②
  • 代码随想录二刷Day 59
  • 由一个自动化脚本运维展开的思考
  • STM32F103C8T6第二天:按键点灯轮询法和中断法、RCC、电动车报警器(振动传感器、继电器、喇叭、433M无线接收发射模块)
  • 路由器基础(九):防火墙基础
  • 免费(daoban)gpt,同时去除广告
  • 如何使用Plex在Windows系统上搭建一个全能私人媒体影音站点
  • vue如何实现视频全屏切换
  • Shopee买家通系统一款全自动操作虾皮买家号的软件
  • 希亦内衣洗衣机和小米哪个品牌好?内衣洗衣机横评对比
  • 下载安装各种版本的Vscode以及解决VScode官网下载慢的问题
  • 双十一电视盒子哪个牌子好?测评工作室整理口碑电视盒子排名
  • 11.1总结
  • Proteus仿真--1602LCD显示电话拨号键盘按键实验(仿真文件+程序)