一、使用vant组件生成如下页面二、前端代码如下点击选择图片确定取消用form块宝珠van-cell-group组件，van-button中from-type="submit"form表单的bindsubmit

1、当前页面只用一次某个组件vue2是::v-deep.vant-button{}vu3则是::v-deep(.vant-button){}页面示例回到顶部::v-deep(.van-button){background-color

我们这次排查问题就拿比较常用的vant-weapp作为示例：使用selectComponent获取自定义组件对象时，返回null的问题1、json引入组件"usingComponents":{"van-button

跳转页面跳转页面Form表单⭐van-form内部按钮触发检验和提交表单的问题❓原因：van-button标签native-type属性的默认值为submit，导致触发表单提交；解决：将van-button

UI组件我这边使用的是vantweapp组件库第一步是基础的组件json配置{"usingComponents":{"van-field":"@vant/weapp/field/index","van-button

解决步骤：命令行cd转到miniprogram目录(注意使用下面的命令行要在工程目录下cd)cd.\miniprogram\在这里生成package.jsonnpminit-y在这个目录下安装vantnpmi@vant/weapp-S--production由于我们是在miniprogram目录下安装的，所以就不用修改project.config.json了保持默认就好：{..."setting"

node_modules文件在微信开发者工具构建npmimage.png构建成功后会在目录生成miniprogram_npm文件在app.json文件中定义组件"usingComponents":{"van-button

image.png2.引入在需要引入的页面目录下的****.json文件中{"usingComponents":{"van-button":"../../..

在用微信小程序开发过程中引入vant过程中，导入button组件出现错误。按着文档各种配置都配了。如：project.config.json的配置。构建。包括没有npm构建按钮。最后发现了问题，我的项目是ts项目，所以需要引入ts的配置才能使用（官网的配置）。成功。

json用到的组件{"usingComponents":{"van-cell":"@vant/weapp/cell/index","van-button":"@vant/weapp/button/index

首先，遇到问题不要慌，大部分问题可以通过重启解决文章目录首先，遇到问题不要慌，大部分问题可以通过重启解决flex布局失效：使用Vant组件[“usingcomponents“][“van-button“

-production第三步：npmivant-weapp-S--production然后就可以构建npm了构建成功会出现两个文件夹在全局中//app.json"usingComponents":{"van-button

点击详情，点击使用npm模块image.png5.打开微信开发者工具，点击工具->构建npm,刷新一下即可使用组件库6.在app.json引入组件//app.json"usingComponents":{"van-button

dependencies":{"core-js":"^2.6.5","vue":"^2.6.10","vant":"^2.12.3"},....demo只需要canvas,van-uploader,van-button

初始化先这样然后输入命令npminit四、安装vantweappnpmi@vant/weapp-S--production五、构建npm模块六、使用在index.json中{"usingComponents":{"van-button

npmivant-weapp-S--production5、在微信开发工具执行npm构建，本地设置勾选使用npm模块6、应用vant-weapp（可以在app.json全局使用）{"usingComponents":{"van-button

使用Vant组件[“usingcomponents”][“van-button”]:“@vant/weapp/button/index”未找到：vm235:1miniprogram/app.json:[

效果实现组件的使用在实现效果时，用到了vant中的van-action-sheet(动作面板组件)，van-uploader(图片上传组件)，van-button(按钮)，用到的图片上传中的一个回调函数

错误信息.json:[“usingComponents”][“van-button”]未找到或者.json:[“usingComponents”][“van-button”]:“path/to/vant-weapp

youzan.github.io/vant/#/zh-CN/fieldsrc/views/user/login.vue界面发送验证码登录样式.p5{padding:05px;}.btn_box{padding:10px;.van-button

npminit就会生成package.json2、运行npmivant-weapp-S--production3.安装成功后点击工具=>构建npm成功后显示下图三、使用组件库首先在json文件中引入组件“van-button

van-button去除边框，自定义样式基本语法默认按钮主要按钮信息按钮警告按钮危险按钮自定义样式注意不要给任何类型和参数向他求助.add{top:1.33333vw;font-size:5.33333vw

//安装npmivant-weapp-S--production小程序工具的配置：注册使用：可以在app.json全局注册也可以在页面内的json文件注册"usingComponents":{"van-button

-安装vant-npminstallvant-weapp-S--production-引用-/app.json"usingComponents":{"van-button":"vant-weapp/dist

接下来主要介绍，如何在微信小程序上仿造出下方的京东选择按钮面板：二、组件选择：van-tag为什么不选择van-button呢？

npmivant-weapp-S--production3.工具---构建npm4.在最右边详情里勾选上使用npm模块5.在需要引用组件库的页面json文件里，添加："usingComponents":{"van-button

在全局app.json上贴入如下代码，前提是加入了编译好的Vant文件的dist文件夹"usingComponents":{"van-button":"dist/button","van-cell":"

yarn安装yarnaddvant-weapp--production3、在微信小程序上左上角工具=>构建NPM成功会出现一个这样的文件夹：4、使用：安装路径挂载{"usingComponents":{"van-button

index.json申明即可："usingComponents":{"van-popup":"vant/popup/index","van-cell-group":"vant/cell-group/index","van-button

引入了所有需要用的组件，发现自己简直棒棒哒{"usingComponents":{"van-button":

下载完成以后进入node_modules/_vant_weapp下的dist文件夹复制将其dist的文件放到static目录下//在使用页面的文件夹内新建main.json{"usingComponents":{"van-button

//github.com/youzan/vant-weapp使用教程：1.下载后找到dist2.在你的项目里面点击红色圈的…三点把dist拖进你的项目3.es6“usingComponents”:{“van-button

使用vant-weapp，需要配置app.json"usingComponents":{"van-button":"static/vant-weapp/dist/button/index","van-tab

在mpvue按文档使用1.1安装1.2"usingComponents":{"van-button":"@vant/weapp/button/index","van-toast":"@vant/weapp

static文件夹下：在src文件夹下，即我们写vue代码的位置，正在编写的页面中添加main.json文件（vue代码编译成小程序代码时会直接使用这个文件）{"usingComponents":{"van-button

package.json2.运行npmivant-weapp-S--production3.安装成功后点击工具=>构建npm之后点击详情=>使用构建npm渲染二.使用组件库首先在json文件中引入组件"van-button

1：在页面上写上更新和删除的按钮现在json里面引入vant组件{"usingComponents":{"van-button":"../..

Button,Toast,Rate,Field,CellGroup,Notify}from"vant";import{log}from"util";exportdefault{components:{"van-button

package.json2.运行npmivant-weapp-S--production3.安装成功后点击工具=>构建npm之后点击详情=>使用构建npm渲染二.使用组件库首先在json文件中引入组件"van-button

componentscp-rnode_modules/vant-weapp/distsrc/components/vant-weapp//在页面配置中引用config={usingComponents:{'van-button

//segmentfault.com/a/1190000016718924问题在使用vant来写小程序的时候，安装官方的方式安装引用://index.json{"usingComponents":{"van-button

问题在使用vant来写小程序的时候，安装官方的方式安装引用://index.json{"usingComponents":{"van-button":"/miniprogram_npm/vant-weapp