uni-app项目中引入Vant UI组件库完美避坑指南(纯净版)

2024-03-01 0 366
目录
  • 第一步,HBuilder X中新建一个uni-app的项目
  • 第二步,HBuilder X提示项目创建成功,在HBuilder X用命令行窗口打开创建的项目(或直接在创建的项目文件夹内用cmd指令打开)
  • 第三步,输入npm init -y 指令,创建项目配置文件(即package.json);
  • 第四步,输入npm i @vant/weapp -S –production下载vant
  • 第五步,在项目的根路径下,创建wxcomponents目录,并将依赖项(node_modules)中@vant文件夹下的dist复制到wxcomponents,并修改文件夹名为vant;
  • 第六步,在pages.json中注册并引入组件
  • 总结

第一步,HBuilder X中新建一个uni-app的项目

1、添加项目名称,选择文件路径

2、选择默认模板

3、Vue版本选择(若无其他需求,点击创建即可)

uni-app项目中引入Vant UI组件库完美避坑指南(纯净版)

第二步,HBuilder X提示项目创建成功,在HBuilder X用命令行窗口打开创建的项目(或直接在创建的项目文件夹内用cmd指令打开)

uni-app项目中引入Vant UI组件库完美避坑指南(纯净版)

uni-app项目中引入Vant UI组件库完美避坑指南(纯净版)

uni-app项目中引入Vant UI组件库完美避坑指南(纯净版)

第三步,输入npm init -y 指令,创建项目配置文件(即package.json);

uni-app项目中引入Vant UI组件库完美避坑指南(纯净版)

uni-app项目中引入Vant UI组件库完美避坑指南(纯净版)

第四步,输入npm i @vant/weapp -S –production下载vant

uni-app项目中引入Vant UI组件库完美避坑指南(纯净版)

uni-app项目中引入Vant UI组件库完美避坑指南(纯净版)

安装完成后,项目中会多出一个依赖项,也代表安装成功

uni-app项目中引入Vant UI组件库完美避坑指南(纯净版)

第五步,在项目的根路径下,创建wxcomponents目录,并将依赖项(node_modules)中@vant文件夹下的dist复制到wxcomponents,并修改文件夹名为vant;

uni-app项目中引入Vant UI组件库完美避坑指南(纯净版)

第六步,在pages.json中注册并引入组件

uni-app项目中引入Vant UI组件库完美避坑指南(纯净版)

以下为组件的全局注册,可根据需求按需导入组件:

\”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\”
}

如此,即完成了Vant组件库的引入!

uni-app项目中引入Vant UI组件库完美避坑指南(纯净版)

总结

到此这篇关于uni-app项目中引入Vant UI组件库的文章就介绍到这了,更多相关uni-app引入Vant UI组件库内容请搜索悠久资源网以前的文章或继续浏览下面的相关文章希望大家以后多多支持悠久资源网!

您可能感兴趣的文章:

  • 详解如何在微信小程序开发中正确的使用vant ui组件
  • 详解vantUI框架在vue项目中的应用踩坑

收藏 (0) 打赏

感谢您的支持,我会继续努力的!

打开微信/支付宝扫一扫,即可进行扫码打赏哦,分享从这里开始,精彩与您同在
点赞 (0)

悠久资源 JavaScript uni-app项目中引入Vant UI组件库完美避坑指南(纯净版) https://www.u-9.cn/biancheng/javascript/182132.html

常见问题

相关文章

发表评论
暂无评论
官方客服团队

为您解决烦忧 - 24小时在线 专业服务