目录1、vant介绍2、安装node.js2.1在node.js官网下载LTS版本2.2安装2.3测试3、安装使用vant3.1初始化npm3.2通过npm安装3.3修改project.config.json3.4构建npm包3.5引入组件本文记录通过npm安装vant并在微信小程序开发中引入vant组件的详细步骤1、vant介绍vant是一个轻量、可靠的移动端组件库，于2017年开源。目前Vant官方提供了Vue2版本、Vue3版本和微信小程序版本，并由社区团队维护React版本和支付宝小程序版本。2、安装node.js2.1在node.js官网下载LTS版本在node.js官网下载LTS版
vant框架van-field输入栏添加外边框van-field标签默认是无外边框的，如下图：添加外边框后的样式，如下图：采用样式穿透的方式，上代码：divclass="rowTextArea">van-fieldv-model="ruleForm.address"name="地址"label="地址"requiredtype="textarea"placeholder="请输入详细地址"/>/div>添加外边框.rowTextArea::v-deep.van-field__value{border:1pxsolid#ccc;}换行.rowTextArea::v-deep.van-cell{d
目录1.首先，要排除是自己配置全局引用错误导致的问题 2.排除不是自己引用问题，进入下一步移除babel-plugin-import3.在此时，似乎就已经解决showToast报错问题，环境： "vant":"^4.6.3",1.首先，要排除是自己配置全局引用错误导致的问题要确保自己引用Toast没问题在vue页面正确的使用Toast相关提示框 这里关于app.use(vent相关组件)，个人建议写在注入路由app.use(router)的上面，因为我之前貌似刚开始用vant因为use顺序问题，导致vant死活不生效，，，备忘：今天是刚开始用vant库的第4天，部分使用vant某个组件报错等
1.在自定义组件的wxss文件里添加如下代码，此处还可以改变字体颜色之类的：.van-tab--active { font-weight: bold; font-size: 34rpx;} 2.在自定义组件的json文件中修改组件样式隔离模式："styleIsolation": "shared" 3.还遇到一个天坑的问题，这个自定义组件必须放在父组件的第一个引用位置，否则无法生效。我之前tab组件在upload组件的下面，导致一直无法生效。"usingComponents":{"tab":"/components/tab/tab","upload":"/componen
一、原因因@vant/area-data部分的市/区数据跟后台使用的高德/腾讯省市区有所出入，故须保持跟后台用同一份数据，所以考虑以下几个组件1、Area2、Cascader3、Picker因为使用的是高德地图的省市区json文件，用area的话修改结构代价太大，费时费力。接着尝试使用Cascader组件，但这个组件每列数据过多时会滑动、点击卡顿等等，故也排除，只剩最后的picker了Cascader卡顿： 二、使用刚开始看文档这个结构一时没有理解，有点懵，后面经过研究发现需要如下结构以高德gaode-area.json为例，点击就可以下载高德省市区数据（包含压缩和未压缩的）因为想减少小程序的
在使用Vue3+Vite+Vant搭建移动端项目时报错UncaughtSyntaxError:Therequestedmodule'/node_modules/.vite/vue.js?v=xxxx'。Vue3+Vite+Vant原因在开发过程中Vue3的依赖版本有变更，直接使用的npminstall下载新的版本，会导致node_modules下存在旧版本的缓存，从而影响了本地项目的启动编译。解决方案删除项目的node_modules文件夹，如果根目录存在package-lock.json，最好也一并删除。修改package.json，如下："dependencies":{"axios":"^
之前一直是在普通项目下使用vantweapp，这不最近学了ts，使用微信开发工具的ts+less初始化项目，再引入vant时踩了好久坑，特来记录一下前言本文章适合微信开发工具的ts项目，指的是项目目录结构如下图总结从上图可以看到，小程序的ts初始化项目，与之前常见的不同，主要在于miniprogram外层多了些东西，此时我们在终端里npm一下，你会发现node_modules也是装在外面的。这其实是正常现象，但当时我对此感到疑惑并认为配置要对此做些改变。。。没有变！没有变！没有变！我们依然跟着官网走就可以了！坑在哪里，坑在我们更改project.config.json后，工具无法及时识别，导致
第一章宠物预约医疗项目实战-环境配置与VantUI集成文章目录前言一、VantUI是什么？二、使用步骤2.1安装node.js2.2通过npm安装vant2.3修改app.json2.4修改project.config.json2.5构建npm包2.6使用组件全局引入和局部引入全局引入局部引入前言Vant是一个轻量、可靠的移动端组件库，于2017年开源。目前Vant官方提供了Vue2版本、Vue3版本和微信小程序版本，并由社区团队维护React版本和支付宝小程序版本。微信小程序版本的Vant组件库是VantWeapp，其官方文档是https://youzan.github.io/vant-we
一、需求不管是什么项目，通常会有这种需求，密码输入的时候点击要显示密码再次点击隐藏二、最终效果三、参数配置继承van-field所有API（Attributes(Props)、Events、Slots）新增了属性：showPassword默认不显示四、具体代码template>van-fieldclass="t_vant_field"v-bind="$attrs":type="passwordType"v-on="$listeners">templateslot="right-icon"v-if="showPassword">spanclass="solts"@click="switchPas
因为vantUI给的图标非常少，为了满足自己的需求，必须自定义图标，这里分享一种vant引入阿里的iconfont矢量图库中的图标的方法第一步：去阿里矢量库下载图标点击资源管理—>我的项目—>新建项目 在首页搜索需要的图标添加至自己的项目中 第二步：把项目下载到本地，解压，然后把iconfont.css复制到项目的assets/css文件夹中（并且修改代码路径），iconfont.ttf，iconfont.woff，iconfont.woff2放到新建的fonts文件夹中。并且在main.js中引入 ！！！！ 修改iconfont.css里面的路径（全部要改，这里只是展示改完和未改的区别）
