目录前言VantWeapp的安装与使用1、安装node.js2、通过npm安装3、修改app.json4、修改project.config.json5、构建npm包6、使用组件全局引入和局部引入全局引入局部引入Toast组件的使用官方文档API详解Props参数Events事件Slot插槽外部样式类前言Vant是一个轻量、可靠的移动端组件库，于2017年开源。目前Vant官方提供了Vue2版本、Vue3版本和微信小程序版本，并由社区团队维护React版本和支付宝小程序版本。微信小程序版本的Vant组件库是VantWeapp，其官方文档是https://youzan.github.io/vant
问题重现 最近在做项目时，有一个需求是让van-collapse下拉折叠面板的第一项默认是展开状态；我使用到了VantUI组件，首先按照官网文档的写法直接引入：制定拜访计划保险保障分析制作计划书会客厅讲解修改备注修改备注exportdefault{data(){return{activeNames:['1'],};},};默认每一项都是不展开的： 需求实现先看官方文档CollapseProps：参数说明类型默认值v-model当前展开面板的name手风琴模式：number|string非手风琴模式：(number|string)[]-accordion是否开启手风琴模式boole
问题重现 最近在做项目时，有一个需求是让van-collapse下拉折叠面板的第一项默认是展开状态；我使用到了VantUI组件，首先按照官网文档的写法直接引入：制定拜访计划保险保障分析制作计划书会客厅讲解修改备注修改备注exportdefault{data(){return{activeNames:['1'],};},};默认每一项都是不展开的： 需求实现先看官方文档CollapseProps：参数说明类型默认值v-model当前展开面板的name手风琴模式：number|string非手风琴模式：(number|string)[]-accordion是否开启手风琴模式boole
vant-weapp全局主题样式什么是VantWeappVantWeapp是有赞前端团队开源的一套小程序UI组件库，助力开发者快速搭建小程序应用。它所使用的是MIT开源许可协议，对商业使用比较友好。VantWeapp官方文档地址https://youzan.github.io/vant-weapp定制全局主题样式VantWeapp使用CSS变量来实现定制主题。关于CSS变量的基本用法，请参考MDN文档：https://developer.mozilla.org/zh-CN/docs/Web/CSS/Using_CSS_custom_properties定制全局主题样式在app.wxss中，写入
vant-weapp全局主题样式什么是VantWeappVantWeapp是有赞前端团队开源的一套小程序UI组件库，助力开发者快速搭建小程序应用。它所使用的是MIT开源许可协议，对商业使用比较友好。VantWeapp官方文档地址https://youzan.github.io/vant-weapp定制全局主题样式VantWeapp使用CSS变量来实现定制主题。关于CSS变量的基本用法，请参考MDN文档：https://developer.mozilla.org/zh-CN/docs/Web/CSS/Using_CSS_custom_properties定制全局主题样式在app.wxss中，写入
微信小程序集成vant，大概的过程先通过npm安装vant包->微信小程序设置npm环境变量->将npm中的vant包导成miniprogram_npm 开发环境macOS，微信小程序模版【支持腾讯云】安装vant包cdminiprogram#通过npm安装npmi@vant/weapp-S--production配置微信小程序的样式，去除miniprogram/app.json中"style":"v2"配置项目config中的packageJsonPath和miniprogramNpmDistDirpackageJsonPath->npm的package.json文件的位置mini
微信小程序集成vant，大概的过程先通过npm安装vant包->微信小程序设置npm环境变量->将npm中的vant包导成miniprogram_npm 开发环境macOS，微信小程序模版【支持腾讯云】安装vant包cdminiprogram#通过npm安装npmi@vant/weapp-S--production配置微信小程序的样式，去除miniprogram/app.json中"style":"v2"配置项目config中的packageJsonPath和miniprogramNpmDistDirpackageJsonPath->npm的package.json文件的位置mini
vue3的官网地址：https://cn.vuejs.org/；这里要说一下，vue3不支持IE11，如果要兼容IE11及其一下，不建议使用vue3。创建vue脚手架，如果你需要使用ts，则需要node版本>=16。本文按照大于16的node版本来搭建一个vue3的脚手架。第一步：>npminitvue@latest 如果想创建指定版本，则使用 npminitvue@指定版本；“>”不要带上； 运行之后，会让你填写项目名称和选择你需要的插件，如下图 用空格键切换No/Yes; Projiectname：项目名称； Packagename:package.json里面name属
vue3的官网地址：https://cn.vuejs.org/；这里要说一下，vue3不支持IE11，如果要兼容IE11及其一下，不建议使用vue3。创建vue脚手架，如果你需要使用ts，则需要node版本>=16。本文按照大于16的node版本来搭建一个vue3的脚手架。第一步：>npminitvue@latest 如果想创建指定版本，则使用 npminitvue@指定版本；“>”不要带上； 运行之后，会让你填写项目名称和选择你需要的插件，如下图 用空格键切换No/Yes; Projiectname：项目名称； Packagename:package.json里面name属
vant的表单校验个人理解：将rules当成一个对象去理解，传参时可以是整个对象或者对象的某一属性常用两种校验方式1，正则表达式1.1自定义校验规则（校验规格也可传入多条）：表单：:rules="telRules"data:telRules:[{required:true,message:'手机号不能为空',trigger:blur,},{validator:value=>{return/^(0|86|17951)?(13[0-9]|15[012356789]|166|17[3678]|18[0-9]|14[57])[0-9]{8}$/.test(value)},message:'请输入正确的
