uni-app配置Vant Weapp

10月前作者：少年づ＾分类：Toy博客阅读(42) 违法举报

这篇具有很好参考价值的文章主要介绍了uni-app配置Vant Weapp。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

1.创建uni-app项目

uni-app配置Vant Weapp

2.创建wxcomponents目录

uni-app配置Vant Weapp

3. 安装vant需要的模块包

3.1找一个空文件cmd 进入执行

vant官网

3.1.1通过 npm 安装

npm i @vant/weapp -S --production

3.1.2通过 npm 安装

yarn add @vant/weapp --production

3.2.1获取dist文件

uni-app配置Vant Weapp

4.将dist内容复制到wxcomponents目录下

uni-app配置Vant Weapp

5.1 使用vant

5.1使用button按钮

uni-app配置Vant Weapp

5.1.1 在pages.json 中的globalStyle配置项中引入官网的配置

5.1.2 将引入官网的配置修改为我们自己下载好的文件路径

![!](https://img-blog.csdnimg.cn/3e58e0523bf0424984bdf78875a6f25b.png)

5.2 在文件中使用button按钮

5.2.1找到官网的button的配置

uni-app配置Vant Weapp

5.2.2引入

uni-app配置Vant Weapp

6.效果

uni-app配置Vant Weapp

视频

uni-app配置vant文章来源地址https://www.toymoban.com/news/detail-488810.html

到了这里，关于uni-app配置Vant Weapp的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：如若内容造成侵权/违法违规/事实不符，请点击违法举报进行投诉反馈，一经查实，立即删除！

分享到：

领支付宝红包赞助服务器费用

如何用uni-app+vue3+vant开发微信小程序

uni-app之前一直只支持vue2语法， 2021年8月：新版支持了vue3 开发，App平台编译器升级为 Vite；新版 uni-app 框架主要做了三大改进：重写框架内核：基于 vue3 + ts 重写内置组件和API，实现更彻底、更高效的 tree-shaking ；新增支持 Vite 构建工具，在H5平台实现秒开预览；新增支持

2024年02月09日
浏览(65)
uni-app开发微信小程序使用vant组件tab栏遇到的坑van-tabs

背景：使用uni-app开发微信小程序项目，使用的是Vant Weapp实现Tab标签页。要实现跳转过来，显示默认的当前tab。在app.json或index.json中引入组件通过active设定当前激活标签对应的索引值，默认情况下启用第一个标签。 data中的属性页面接受参数，默认显示对应的tab 问题到此

2024年02月10日
浏览(52)
uni-app（Vue3/Vite） + vant UI（Vue3版本）+ js 按需引入的项目搭建

因为要完成软件工程的项目，要做一个nativeApp，看了很多的技术文档以后决定使用多端兼容的uni-app来开发。组件方面的话最后决定使用目前比较火的Vant UI。但是看了CSDN和掘金上面的很多文章，似乎没有一篇是关于uni-app中使用Vite对vant组件进行按需引入（可能这个

2023年04月09日
浏览(68)
Uni-app + Vue3 + TS +Vite 创建项目

npm 都很熟，可是与 npm 如此相似的 npx 是干嘛的呢？我们为甚要介绍 npx ? 由于 uni-app 官方提供创建命令使用的是 npx，所以我们先来了解下 npx 是干什么的？它与 npm 的区别。 npx 是 npm 的高级版本，它从 npm v5.2 版本开始引入的，与 npm 绑定在一起，无需额外安装，具有更大的功

2023年04月15日
浏览(79)
学会用命令行创建uni-app项目并用vscode开放项目

(创作不易，感谢有你，你的支持，就是我前行的最大动力，如果看完对你有帮助，请留下您的足迹）目录创建 uni-app 项目命令行创建 uni-app 项目编译和运行 uni-app 项目：用 VS Code 开发 uni-app 项目（不必依赖 HBuilderX） vue3+ts版: npx degit dcloudio/uni-preset-vue#vite-ts 项目名称官网

2024年02月09日
浏览(52)
快速学会创建uni-app项目并了解pages.json文件

(创作不易，感谢有你，你的支持，就是我前行的最大动力，如果看完对你有帮助，请留下您的足迹）目录前言创建 uni-app 项目通过 HBuilderX 创建 pages.json pages style globalStyle tabBar 经过半个多月的学习，vue基础入门就告一段落啦，接下来就要开始学习制作微信小程序了

2024年02月11日
浏览(50)
uni-app App权限配置参数详情

权限名称描述 android.permission.ACCESS_CHECKIN_PROPERTIES 访问登记属性读取或写入登记check-in数据库属性表的权限 android.permission.ACCESS_COARSE_LOCATION 获取错略位置通过WiFi或移动基站的方式获取用户错略的经纬度信息,定位精度大概误差在30~1500米 android.permission.ACCESS_FINE_LOCATION 获取精确

2024年02月09日
浏览(54)
uni-app从创建到运行到微信开发者工具

uni-app是一个基于Vue.js开发跨平台应用的前端框架解决了原生小程序编写的繁琐，只要你会vue就可以通过uni-app编写小程序首先开发工具我推荐HBuilder，虽然我比较喜欢VScode，但这个真的很适合写uni-app,而且uni-app官方推荐使用HBuilderX来开发uni-app类型的项目好处：模板丰富、有

2024年02月09日
浏览(75)
uni-app 可视化创建的项目移动端安装调试插件vconsole

可视化创建的项目，在插件市场找不到vconsole插件了。又不好npm install vconsole 换个思路，先创建一个cli脚手架脚手架的uni-app项目，然后再此项目上安装vconsole cli脚手架创建uni-app项目安装插件项目Terminal运行命令：npm install vconsole 安装完成之后，插件在node_modules/vconsol

2024年02月10日
浏览(44)
使用uni-app+uview创建小程序工程并支持请求后端接口

一、使用工具： 1.hubilderx 下载地址：HBuilderX-高效极客技巧 2.微信开发者工具下载地址：微信开发者工具下载地址与更新日志 | 微信开放文档 3.uview组件库API：Color 色彩 | uView 2.0 - 全面兼容nvue的uni-app生态框架 - uni-app UI框架二、使用hubuilderx创建uni-app项目

2024年02月11日
浏览(62)